Sat, 2010-08-21 17:16
hi,
how to make divs stretch 100% in height?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My page title</title> </head> <body> <div style="width:600px; height:150px; background-color:red;">TOP</div> <div style="width:600px; background-color:yellow;">MIDDLE</div> <div style="width:600px; height:20px; background-color:blue;">BOTTOM</div> </body> </html>
Sat, 2010-08-21 21:07
#1
Vertical columns: Faux
Vertical columns: Faux columns.
Horizontal rows: Sticky footer.
Judging from the names of the divs you want "sticky footer".
Mon, 2010-08-23 16:25
#2
I think neither is helping
I think neither is helping here.
I have a new code and problem is that #container does not wrap the inner div (#test). Can it be done somehow? Without Javascript, without background image, only CSS?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My page title</title> <style type="text/css"> html { height: 100%; } body { background-color: black; margin: 0px 0px 0px 0px; height: 100%; } #container { background-color: green; width: 900px; height: 100%; margin: 0px auto; border-left: 5px solid yellow; border-right: 5px solid yellow; } #test { height: 900px; width: 200px; float: left; background-color: orange; } </style> </head> <body> <div id="container"> <div id="test"></div> </div> </body> </html>
Mon, 2010-08-23 16:33
#3
Personally, I'd use Faux
Personally, I'd use Faux Columns and call it a day. Your second question could possibly be solved by clearing (or containing) your floats.
Mon, 2010-08-23 16:35
#4
Or is there any
Or are there any alternatives?
This is what i would like to have in the center, #container, 900px width, with left and right border:
And after that i would like to add divs inside #container.
Mon, 2010-08-23 16:56
#5
Verschwindende
Personally, I'd use Faux Columns and call it a day. Your second question could possibly be solved by clearing (or containing) your floats.
When i used background image (Faux Columns) some browsers didn't show website very good.
Adding another div below with clear:both; does not work - #container still does not wrap inner divs:
Can it be done by using some combination of tables and CSS?