DIVs won't auto width

Forum Moderators: not2easy

Message Too Old, No Replies

DIVs won't auto width

themeaty

4:24 pm on Feb 21, 2006 (gmt 0)

I need two DIVs side-by-side. The left DIV is set at 150px wide. The right DIV needs to adjust to the browser width.

I can't get this to work. :-(

The right DIV does not cooperate and moves down to the next line in most platforms/browsers. Or, it will maintain the full width of the browser window and create a scrollbar.

Any suggestions? Thanks!

coopersita

4:29 pm on Feb 21, 2006 (gmt 0)

Did you float one of the divs? Or did you use position:absolute?

Giving a width to a div won't make the other divs wrap around automatically.

themeaty

4:50 pm on Feb 21, 2006 (gmt 0)

The DIVs don't wrap. Here's my CSS.

#LeftColumn {
margin: 0px;
padding: 0px;
float: left;
width: 150px;
position: relative;
}
#RightColumn {
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
float: left;
width: 100%;
}

coopersita

5:13 pm on Feb 21, 2006 (gmt 0)

I removed the float from the right column, and it works now:

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" title="text/css">
/* <![CDATA[ */
#LeftColumn {
margin: 0px;
padding: 0px;
float: left;
width: 150px;
position: relative;
}
#RightColumn {
margin: 0px;
padding: 0px;
position: relative;
left: 0px;
top: 0px;
clear: right;
width: 100%;
}
/* ]]> */
</style>
</head>
<body>
<div id="LeftColumn">sss</div>

themeaty

5:46 pm on Feb 21, 2006 (gmt 0)

It works bascially enough. But the content gets screwed up. When I specify padding/margin to space the columns apart, content gets shifted the wrong way in some browsers.

Thanks for your help, though. I'll probably just use a two column, single row table if I can't figure this out soon.

coopersita

6:14 pm on Feb 21, 2006 (gmt 0)

It's hard to tell what the problem you have is exactly, but here's an idea:

The problem may be that you have width:100% for the right container. If you add padding and margin to that, you'll have a combined width of 100%+padding+margin.

If you are not floating te right container anymore, you shouldn't need the width:100%. It will be 100% automatically.

Jalinder

12:52 pm on Feb 23, 2006 (gmt 0)

If right div is not floated the IE 3px jog bug will show up and it seems unsolvable.

Best solution to IE 3px bug is perhaps to avoid it by having right div also as float. But then you'll have to assign width to the right div. The total width of left and right floats should not exceed 100%. You can have widths in percentage e.g. left float div 20% and right float div 80%.

Light_Gear

2:44 pm on Feb 23, 2006 (gmt 0)

I believe this is what you are looking for.
This CSS is working at [aosc.teenmissions.net...]

If you need code for the content section let me know

/* CSS Document */

body
{ min-width:900px;
background:#CCCC99 url();
background-repeat:repeat-x;

}

h1 { margin-left:2px;
margin-right:5px;
padding-left:2px;
font:Arial, Helvetica, sans-serif;
font-size:18px;
background-color:#E5D4BC;
width:auto;
border:thin #000000 solid;}
h3 {
padding-left:5px;
font:Arial, Helvetica, sans-serif;
font-size:18px;
border-top: #A43500 thin solid;
background-color: #FFF0B1;
}

/* ************ */
/* Header styles */
/* ************ */

#header { margin-bottom:10px;
background-color:#CC9966;
max-height:160px;
border:#000000 thin solid;

}

#header p { font:Arial, Helvetica, sans-serif;
font-size:14px;

}

/* ************ */
/* Menu styles */
/* ************ */
#menu {
width:145px;
margin-left:5px;
background-color:#fff;
border:#A43500 thin solid;

}

a.navLink { /* Main Navigation link rules */
text-decoration:none;
display:list-item;
list-style-position:inside;
background-image:url();
background-repeat:repeat-y;
border-top:1px solid #666;
border-right:1px solid #333;
margin:0px;
padding:2px 5px;
font-size:.9em;
}
a.navLink:link {
color:#036;
}

a.navLink:hover {
background-image:url();
color:#ff0000;
}
a.navLink:active {
background-image:url();
color:#00f;
}

/* ************ */
/* content styles */
/* ************ */
#content { margin-left:158px;
margin-right:158px;
margin-bottom:5px;
padding-left:.5em;
background-color:#FFFFFF;
background-image:url();
background-repeat:repeat-y;
border:#333333 thin inset;

}

#content p { min-width:500px;
padding-left:1em;
padding:5px;
font:Arial, Helvetica, sans-serif;
font-size:14px;

}
#content p img {
Float:right;
border-right:#666666 thin solid;
border-bottom:#666666 thin solid;
width:30%;
}

#content p h2 {
font-size:16px;
font-style:oblique;
border-top: #000000 thin solid;

}
#content em { padding-left:20px;
font:Arial, Helvetica, sans-serif;
font-style:italic;
font-size:14px;
}
#content p a:link { text-decoration:none;}
#content p a:hover { background-color:#D1C7FF;
text-decoration:none;}
/* ************ */
/* sponsor styles */
/* ************ */

#sponsorbox { margin-left:10px;
margin-bottom:10px;
border-bottom:#000000 thin solid;
border-left:#000000 thin solid;
width:155px;
background:#49382A url(../images/sponsershipbackground.jpg);
background-repeat:repeat-y;
text-align:center;
float:right;
font:Arial, Helvetica, sans-serif;
font-size:12px;
padding:5px;
color:#FFFFFF;
}

#sponsorbox a:link { text-decoration:none;}
#sponsorbox a:hover { background-color:#D1C7FF;
text-decoration:none;}
#sponsorbox h3 { background:#BEB2A7;
color:#A43500;
font-size:14px;
font:"Times New Roman", Times, serif;
padding:5px;
border:#A43500 thin solid;
}
#sponsorbox h4 { background:#BEB2A7;
color:#000000;
font-size:12px;
font:"Times New Roman", Times, serif;
padding:5px;
border:#A43500 thin solid;
}
#sponsorbox img{ border:#A43500 thin solid; }

/* ************ */
/* sidebar left styles */
/* ************ */

#sidebar {float:left;
background:#E5D4BC url() ;
background-repeat:repeat-y;
width:150px;
border:#A43500 thin solid;
text-decoration:none;
}

#sidebar p { padding:5px;
font:Arial, Helvetica, sans-serif;
font-size:12px;

}
#sidebar ul { padding:5px;
margin-bottom:5px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
background-repeat:repeat-y;
border-bottom: #A43500 thin solid;
}

#sidebar ul a:link { text-decoration:none;}
#sidebar ul a:hover { background-color:#D1C7FF;
text-decoration:none;}
#sidebar ul a:visited { text-decoration:none;}
#sidebar li {
margin-left:15px;
margin-bottom:5px;
font:Arial, Helvetica, sans-serif;
font-size:12px;

}

/* ************ */
/* sidebar right styles */
/* ************ */

#sidebarright {float:right;
background:#E5D4BC url() ;
background-repeat:repeat-y;
width:150px;
text-decoration:none;
border:#A43500 thin solid;
}
#sidebarright h2 {
border-bottom:#A43500 thin solid;
font-size:16px;
color:#A43500;
font:"Times New Roman", Times, serif;
text-align:center;

}

#sidebarright p { padding:5px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
border-bottom: #666633 thin solid;

}
#sidebarright ul { padding:5px;
margin-bottom:5px;
font:Arial, Helvetica, sans-serif;
font-size:12px;

}

#sidebarright p a:link { text-decoration:none;}
#sidebarright p a:hover { background-color:#D1C7FF;
text-decoration:none;}
#sidebarright p a:visited { text-decoration:none;}

/* ************ */
/* footer styles */
/* ************ */

#footer { background-color: #FFFFFF;
border:#333333 thin inset;
}

#footer p { padding:5px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
}

# copyright { font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;

}

#footer a:link { text-decoration:none;}
#footer a:hover { background-color:#D1C7FF;
text-decoration:none;}
#footer a:visited { text-decoration:none;}