2 replies [Last post]
duklaprague
Offline
Regular
Last seen: 12 years 11 weeks ago
Joined: 2006-06-29
Posts: 14
Points: 0

Am just doing a new page, and am trying to use main content and sidebar <DIV>s contained within a main wrapper <DIV>, but something isn't right somewhere.

Hopefully it's something really simple, I just can't see for looking.

The page is here :
http://www.handprintdvd.co.uk/webdesign/rob/index2.htm

The main content and right hand sidebar are spilling out of the wrapper, when presumably they should be within the wrapper <div> which I'd have thought should expand to hold them?

The CSS currently looks like :
body {
color: #666;
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
margin: 0 0 0 0;
background-image:url(background1.jpg);
background-repeat:repeat;
}

#wrapper {
position: relative;
width: 980px;
margin: 0 auto;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
color:#FFFFFF;
}
#mainContent {
background-color:#CCCCCC;
color:#000000;
float:left;
display: inline;
width:720px;
margin-left:10px;
padding-left:0px;
margin-right:10px;
padding-right:0px;
margin-top:10px;
}

#sidebarright {
background-color:#FFFF99;
float:right;
display: inline;
width:220px;
margin-top:15px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
padding-right:0px;
padding-left:0px;
text-align:right;
color:#333333;
}

If anyone could spot what I'm missing that would be appreciated.

Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I'm presuming you've now

I'm presuming you've now found the solution?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

duklaprague
Offline
Regular
Last seen: 12 years 11 weeks ago
Joined: 2006-06-29
Posts: 14
Points: 0

I did, yes thanks. It just

I did, yes thanks.

It just needed an

overflow: hidden;

in the wrapper's CSS.