July 11, 201313 yr Hello. I experimented all morning with different types of layouts and I seem to have stumbled upon this problem. Here's what I have so far: http://pastebin.com/5qtPi7ff . Please load it in your browser. I don't know if you could tell, but I want the black box to be just below those green boxes. Sure, I could use relative or absolute positioning, but I feel like that's not a very good practice because the size of the green box could change anytime new content is added inside of it. So. Is there a simple way to tell the browser to display the black box just below the green ones? (something like overflow: hidden or clear) Edited July 11, 201313 yr by stevefai
July 11, 201313 yr <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Exercise</title> <style type="text/css"> body { margin: 0; } .wrap { height: 960px; width: 960px; background: #555555; margin: auto; margin-bottom: 80px; position: relative; top: 40px; } .greenbox { width: 100%; background: #00FF7F; top: 60px; } .gbox { float: left; width: 300px; height: 160px; background: #00C462; margin-left: 15px; margin-top: 20px; margin-bottom: 20px; } .blackbox { width: 615px; height: 360px; background: black; display:inline-block; } </style> </head> <body> <div class="wrap"> <div class="greenbox"> <div class="gbox"></div> <div class="gbox"></div> <div class="gbox"></div> </div> <div style="clear:both"></div> <div class="blackbox"></div> </div> </body> </html> something like that? Edited July 11, 201313 yr by inlinedivblock
July 11, 201313 yr looks like he will want the clear:both in the greenbox div like so rather then just before the black box, otherwise the light green background does not show <div class="wrap"> <div class="greenbox"> <div class="gbox"></div> <div class="gbox"></div> <div class="gbox"></div> <div style="clear:both"></div> </div> <div class="blackbox"></div> </div> Edited July 11, 201313 yr by D4Y0
July 11, 201313 yr looks like he will want the clear:both in the greenbox div like so rather then just before the black box, otherwise the light green background does not show <div class="wrap"> <div class="greenbox"> <div class="gbox"></div> <div class="gbox"></div> <div class="gbox"></div> <div style="clear:both"></div> </div> <div class="blackbox"></div> </div> agreed ...
July 11, 201313 yr Author Thanks a lot, guys. This wasn't exactly what I had in mind, but your solutions are better. Edited July 11, 201313 yr by stevefai
July 11, 201313 yr no worries, there is more that one solution were you trying to do it with less code?
July 11, 201313 yr Author no worries, there is more that one solution were you trying to do it with less code? I was trying to leave this bit of code untouched: greenbox { width: 100%; background: #00FF7F; position: absolute; top: 60px; } The solution provided by you gets rid of the absolute positioning (hence the "top: 60px;" bit doesn't work). But I figured I don't need that extra space of 60px anyway. Edited July 11, 201313 yr by stevefai
Create an account or sign in to comment