Hi I've got a parent div of 100% inside there is a child div with width size in px but when I make the browser smaller the parent div stop been 100% and becames smaller than the child div is there a way I can make the parent div to always be 100% of the browser here my code <!DOCTYPE HTML> <head> <style type="text/css"> #parent_div {background-color:red; width:100%; padding:10px;} .child_div {background-color:yellow; width:884px; margin:auto; clear:both; padding:10px;} </style> </head> <body> <div id="parent_div"> <div class="child_div"> <p>Compass Group UK & Ireland Limited ("We") are committed to protecting and respecting your privacy.</p> </div> </div> </body> </html> HTML:
Apply min-width to the parent div. But seriously, padding and a fixed width? I doubt you should be fixing that width in the first place. And that clear property: does it have any purpose? If not, shake it off.
Hi Min width doesnt do anything as I need the parent div to be full browser width but somehow when I use as 100% it stops from been 100% when minimise the browser
Yes it does, and that's your problem... You don't actually understand how css works, right? This is a way to do that : <!DOCTYPE HTML> <head> <style type="text/css"> /*this resets all margins and paddings (delete it when implementing)*/ * { margin:0; padding:0; } #parent { background-color:red; width:100%; padding:10px 0; min-width:904px; /*#parent's child width + padding*/ }#parent div { background-color:yellow; width:884px; margin:auto; padding:10px; } </style> </head> <body> <div id="parent"> <div> <p> Compass Group UK & Ireland Limited ("We") are committed to protecting and respecting your privacy. </p> </div> </div> </body> </html> Code (markup): I repeat, that's A way to do it. That's most likely not how I would do it, but I don't really get what you need these containers for so I have to go with that. The first thing I would do is axe that HTML5 garbage. And one more thing: don't, ever, write "#parent_div" if #parent is a div. That's just nonsensical. A similar thing people do is this : </div> <!--end #somediv--> Code (markup): Writing "end" in that comment is more that redundant : doesn't the slash say it already?? FYI, it should go comment and then closing tag, i.e. <!-- #somediv --></div>. It avoids tripping bugs on some old browsers. That other class was also redundant, btw. See the example I gave you. Hope it helps!
Uhm... since the default behavior of a DIV is to expand to the available width OR the width of it's children... Isn't the right answer to lose the width altogether? Though yeah, lose the fixed width on the inner DIV since that's accessibility trash.
Yeah, but for some reason he wants his width fixed... I noticed that saying that fixed width is bad practice around here (which is entirely true) starts an all new discussion in the same thread, going off-topic and bashing the person who originally said it. People get mad when you tell them they don't know squat about what they're doing.