Div Positioning Trouble

[vcarol]

At the moment I’m working on a portfolio site and I want to divide the website in half using divs. I’m a total n00b to web design, so I’m having trouble understanding why my divs won’t stretch the length of the browser or lose the margin space. Here’s what I’ve come up with:

Link to my site– thanks in advance to anyone who can help!

[TheDoc]

html { margin:0; padding: 0; }

If you want, you can use the ‘lazy reset’ and just go:

* { margin: 0; padding: 0; }

Which will reset all elements.

[vcarol]

I tried both but it’s still a no go :( Thank you though!

[vcarol]

Ooh thanks marcdefiant, that took care of my margin problems! I’m still left with the height issue. Here’s what it looks like now:

body {  margin:0;

padding:0;}



#leftside{   float:left;

height:100%;

width:50%;

background-color:#eee;

color:#ccc;

font-size:16px;

text-align:center;}



#rightside {  float:right;

height:100%;

width:50%;

background-color:#ccc;

color:#eee;

font-size:16px;

text-align:center;}

[vcarol]

Actually, after an intense googling session, I figured it out here on css-tricks. The solution was ridiculously simple: make a tiled background image. Yay! Thanks for everyone’s help :)

[levih]

@vcarol the trick here is to set both the body and the html to 100% height, and set the html to 100%. See below for the code, hope this helps.

[Author]

Posts