- This topic is empty.
-
AuthorPosts
-
August 19, 2013 at 5:45 pm #147470
Thadley
ParticipantHey guys,
Sorry this is in “other discussion”, for some reason it wouldn’t let me post it in “css combat”. Alright so onwards to the question at hand.
So I’m trying to figure out how to make the background color of a box 100% for example but I want the height to be flexible. The content that will be displayed on the color will most likely grow because it will end up being responsive. I need the color to follow the height of the content.
I tried using :before/:after and having it hold the color. The position absolute removes it from its actual location and by that it wont follow the content if i’m correct.
horrible explanation but any ideas?
August 19, 2013 at 8:18 pm #147477jurotek
ParticipantCan you make something on the CodePen so we can see what you talking about? If you set background color on div, it will always fill the entire height and width of the div regardless of whether the div is dimensioned with absolute or relative values.
August 19, 2013 at 9:46 pm #147480Thadley
ParticipantHere is the link. Example
Basically, my body is 80% and I set to margin auto for it to be centered like most sites. Since my about section is within the body, the background color won’t be 100% of the window. It will be confined. The only way I know how to make it be 100% is putting it absolute 100% and sticking it to the left.
Problem is if you resize the size of the browser for responsiveness, the content will stretch vertically but the color won’t. I know I set it to 200px but that’s because it wouldn’t show up otherwise. If I were to set the background color to the “about” or better yet the “content” div, it would definitely follow the size of the content but it would also be confined to the max size of 80% and not 100%.
Know what I mean? @jurotek
August 20, 2013 at 2:35 am #147501Paulie_D
MemberSeems to me you want something like this.
August 20, 2013 at 7:35 pm #147645Thadley
Participant@Paulie_D Hey man, thanks. I had thought about something similar to this but this works. I just have to add the width and margin to every main element to center it rather than setting it to the whole body.
Helpful :)
August 21, 2013 at 12:14 am #147656Nishant
ParticipantAugust 21, 2013 at 3:29 am #147669Paulie_D
MemberThis might be more to your liking…same principle
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.