Forum Moderators: not2easy
I have a container, header, footer, left container and content container.
The content container is floated right within the main container, with the left div Positioned Relative.
No matter how hard I try, I can't get these div's to touch. I thought it might be an overlapping pagging or margin but i've been staring at the code for hours and it is all starting to blend into one.
Another quickie...
The container does not resize according to the amount of copy contained in either the left or the content div.
Any Ideas would really help!
body {
padding: 0px;
margin: 0px;
text-align: center;
background-color: #fff;
color: #777;
}
#container {
position: relative;
text-align: left;
width: 740px;
}
div.left {
position: relative;
width: 180px;
padding: 1px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 100%;
}
div.center {
float: right;
right: 0px;
padding: 13px 40px 0px 0px;
}
I'm probabally missing something real obvious
Thank's again
P
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).
The center div now has a width of 560px;
body {
padding: 0px;
margin: 0px;
text-align: center;
background: #fff;
color: #777;
}
#container {
position: relative;
text-align: left;
width: 740px;
}
div.left {
float: left;
width: 180px;
margin: 0;
}
div.center {
margin: 0 0 0 180px;
}
And the in the html:
<div id="container">
<div class="left"><p>left content</p><p>left content</p><p>left content</p></div>
<div class="center"><p>right content</p><p>right content</p><p>right content</p></div>
<br style="clear: both;" /> <!-- required for mozilla -->
</div>
In a two-column layout, I think its easier to float the left div, since you can easily specify the width of that div. Then just add a left-margin to the right div.
Maybe this will help you in some way.
david.
[edited by: Bonusbana at 9:52 am (utc) on April 2, 2004]
It appears that you're working in either IE5, 5.5, or IE6-quirks mode, no?
Also, by touch do you mean overlap, or simply sit side by side?
I would like to be able to lay the HTML out like that but i need to have the content div at the top of the HTML(for the SE's).
>It appears that you're working in either IE5, 5.5, or IE6-quirks mode, no?
I'm not sure what you mean Mia, Browser compatability i guess. Could you please expand.;-)
P
I'm not sure what you mean...
The CSS box model calculates the width of a box by adding any lateral padding to the width of the box. For div.center, you set the width to 560px, which, including the padding-right of 40px equals 600px wide.
So, 600px + 181px = 781px, but your container is 740px.
Now, to complicate things further, IE[win]5 and 5.5 don't add the padding, they include it in the width.
The result is that your mock-up, with a width of 560px, will work in IE[win]5 and 5.5, as well as IE6 in quirks mode, but crack in compliant browsers. You can read up more here [webmasterworld.com].
In addition to the above, you are cenetring your conatiner using a method that only works in Internet explorer. You may want to add "margin:0 auto 0;" to your #container.
Now, how about:
Also, by touch do you mean overlap, or simply sit side by side?
I want the 2 div's to 'touch' so that there is no white space between them.
As it is, the two div's can sit in line with each other, but with a 10-15 px space between them.
When i try to take that space away, the left div 'jumps' to below the content area
Sorry i'm not all that articulate.
Then just consider that extra little space 'free padding' ;-]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
</head>
<body>
<div id="container">
<div class="topheight">
<!----------------------------------------------main content area------------------------------------->
<div class="center">
</div>
<!----------------------------------------------left content area------------------------------------>
<div class="left">
</div>
</div>
<!----------------------------------------------footer content area------------------------------------->
<div class="footer">
</div>
<!--------------------------------------------navigation content area------------------------->
<div id="nav">
</div>
<!------------------------------------------print and email content area------------------------------->
<div class="functions">
<span class="email"><a href="#">email page</a> <img src="images/mm_mail.gif"></span>
<span class="print"><a href="#">print</a> <img src="images/mm_print.gif"></span>
</div>
<!------------------------------------------close of nav div-------------------------------------------->
</div>
<!----------------------------------------------header content area------------------------------------>
<div id="image">
</div>
<div class="header">
</div>
</div>
</body>
</html>
So that's the html, here's the css
/*-----------------------------------------Body, text and container---------------------------------------------*/
body {
padding: 0px;
margin: 0px;
text-align: center;
background-color: #fff;
color: #777;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: normal;
font-size: 70%;
}
#container {
position: relative;
text-align: left;
width: 740px;
}
div.topheight {
position: relative;
padding-top: 0px;
width: 100%;
top: 141px;
background-color: #EDF1F9;
border: 1px solid black;
height: 100%;
overflow: expand;
}
/*--------------------------------------------------Header------------------------------------------------------*/
#image {
position: absolute;
top: 83px;
}
div.header {
position: absolute;
top: 0px;
width: 740px;
padding-top: 6px;
font-size: 8pt;
height: 20px;
padding-bottom:8px;
border-bottom: 7px solid #ccc;
background-image: url(../images/mm_top.gif);
image-repeat: repeat-x;
}
.functions {
height: 15px;
width: 145px;
float: right;
margin: -3px 5px 0px 0px;
padding: 0px 0px 0px 0px;
}
span.email {
float: left;
}
span.print {
float: right;
}
/*---------------------------------------------------Nav--------------------------------------------------------*/
#nav {
background-image: url(../images/mm_navtwo.gif);
position: absolute;
height: 32px;
top: 51px;
border-top: 1px solid blue;
}
/*---------------------------------------------------Left-------------------------------------------------------*/
div.left {
position: relative;
width: 180px;
padding: 1px 0px 0px 0px;
font-size: 100%;
background-color: #fff;
margin: 0px 0px 0px 0px;
height: 100%;
}
div.head {
padding: 20px 10px 5px 10px;
}
div.top {
padding: 25px 10px 5px 10px;
}
div.bottom {
padding: 20px 10px 5px 10px;
}
/*---------------------------------------------------Main-------------------------------------------------------*/
div.center {
float: right;
width: 565px;
right: 0px;
padding: 13px 40px 0px 0px;
}
div.center {
width: 560px;
voice-family: "\"}\"";
voice-family:inherit;
width: 510px;
}
/*--------------------------------------------------Footer------------------------------------------------------*/
div.footer {
position: relative;
top: 0px
height: 10px;
width: 100%;
text-align: left;
color: #afafaf;
font-size: 90%;
padding: 0px 0px 0px 0px;
background-color: #818181;
border-top: 7px solid #C5C5C5;
}
I hope this explains what it is i wan't to do
That would work, except at the top of the center div there is an image that must touch the image at the top of the left div.
ie,
The image it split accross two div's, i would like it to look like it's only one image.
Sorry for being such a pain.
I am so confused!
The image it split accross two div's, i would like it to look like it's only one image.
Okay, I'm away from my computer for the rest of the day now, so... for the above, if the image is not too large, can you keep it together as one image and either:
Also, check out that link I provided above. It will explain the 40px space you are seeing.
What browser are you using?
Good idea, that would save a lot of hassle if i position it at the top of the topheight div. I'll check that link out now.
I'm using ie6 btw.
Thank's again for all of your help.
