HTML + CSS: take all available viewpoer -
I am trying to create a liquid HTML layout with html (taking all the available width and 130 px height), 2 columns (1: 300px width all possible height, 2: column 2 after all 300px and 15- 20px margins have been taken.)
ATM I have received:
HTML:
CSS:
html, body {padding: 0; Margin: 0; Height: 100%; Width: 100%; Minimum width: 1000px; Minimum height: 500px; } Body {font: 12px sans-serif; Background color: #fff; Color: # 000; }. Wiper {height: 100%; Width: 100%; Status: Relative; } .Header {Padding: 0 30px; Height: 100 pixels; Left: 0 pixels; Correct: 0 pixels; Status: Completed; Limit: 1px solid black; Border-top: none; } .content {position: absolute; Top: 120px; Left: 0; Correct: 0; Bottom: 0 pixels; Margin: 10px 20px; Limit: 1px solid black; } .left-column {float: left; Width: 300px; Limit: 1px solid black; } .right-column {margin-left: 315px; Limit: 1px solid black; } The question is: Is there a better solution?
Thank you.
I took your HTML and made this Bela for you :. I did not use any of your CSS, though - I do not like the way I'm using it, so I decided to write it from scratch (sorry about that). Leerem epsum text is just a placeholder - if you delete it, you will see that the division will occupy the entire window. Hope it helps!
PS: The only drawback in my method of having the same-height column is that they do not have any easy way to apply border border.
Comments
Post a Comment