css 2 column one with 2 rows issue

T

TopGun

Gawd
Joined
Jan 22, 2005
Messages
766
http://frozen246.ath.cx/project/

How it's suppose to look:
http://frozen246.ath.cx/project/working.html

That's the design i'm working on.
It's fine if I put a bunch of filler content in the content section but
with just those couple of letters in there the events div's come up under the content :(

HTML:
Code: 
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<center>
<div id="container">
<div id="header">
 <div id="subhead1">
 <b>website title</b>

 </div>
 <div id="subhead2">
 contact<br />
 info
 </div>
</div>
<div id="content">
Content
</div>
<div id="leftnav">
Navigation
</div>

<div id="leftnav2">
<a href="#"><div class="links">Home</div></a>
<a href="#"><div class="links">Schedule</div></a>
<a href="#"><div class="links">Enrollment</div></a>
<a href="#"><div class="links">Contact</div></a>
</div>
<div id="content2">
asdf
</div>
<div id="events">
Scheduled Events
</div>
<div id="events2">

<a href="#"><div class="links">Garage Sale</div></a>
</div>
</div>
</center>
</body>
</html>

CSS:
Code: 
body {
background-image:url('bg.gif');
behavior:url('hover.htc');
margin : 0;
padding : 0;
}
a .links {color:white;text-decoration:none;}
a:visited .links {color:white;text-decoration:none;}
.links:hover {background-color:#0080a0;border-right:4px solid white;}
.links {
padding-left: 3px;
}
#container {
width : 800px;
text-align:left;
}
#header {
border-bottom:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
background-color:#4086AA;
margin-bottom : 15px;
height : 100px;
}
#subhead1 {
float:left;
color:white;
padding-left:10px;
font-size:30px;
line-height : 100px;
}
#subhead2 {
margin-top:5px;
float:right;
color:white;
padding-right:10px;
font-size:15px;
}
#leftnav {
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 157px;
padding-left:3px;
}
#leftnav2 {
margin-top:1px;
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 160px;
}
#events {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 157px;
padding-left:3px;
margin-top:15px;
margin-bottom:1px;
}
#events2 {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 160px;
}
#content {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
margin-bottom:1px;
float : right;
width : 595px;
padding-left:5px;
}
#content2 {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
float : right;
width : 595px;
padding-top:2px;
padding-left:5px;
padding-bottom:2px;
}
 
Well your structure was very poor. I cleaned it up a bit and put your left navigation inside a container inside your main container and floated it left. I put your content in a container and floated that right. I added text-align:center to your body and margin: 0 auto to your main container to center that in the browser.

Here is the fixed code:

HTML: 
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div id="container">

    <div id="header">
         <div id="subhead1">
             <b>website title</b>        </div>
         <div id="subhead2">
             contact<br />
             info         </div>
    </div>
    
    <div style="clear:both"></div>
    
    <div id="contentcontainer">    
        <div id="content">Content</div>
        <div id="content2">asdfsadfsd</div>
    </div>
    
    <div id="leftnavcontainer">
        <div id="leftnav">Navigation</div>
        
        <div id="leftnav2">
            <a href="#"><div class="links">Home</div></a>
            <a href="#"><div class="links">Schedule</div></a>
            <a href="#"><div class="links">Enrollment</div></a>
            <a href="#"><div class="links">Contact</div></a>        </div>
    
        <div id="events">Scheduled Events</div>
        
        <div id="events2">
            <a href="#"><div class="links">Garage Sale</div></a>
        </div>    
    </div>
</div>


</body>
</html>
and the CSS:

Code: 
body {
background-image:url('bg.gif');
behavior:url('hover.htc');
margin : 0;
padding : 0;
text-align:center;
}
a .links {color:white;text-decoration:none;}
a:visited .links {color:white;text-decoration:none;}
.links:hover {background-color:#0080a0;border-right:4px solid white;}
.links {
padding-left: 3px;
}
#contentcontainer {
    float:right;
    width:596px;
}
#leftnavcontainer {
    float:left;
    width:160px;
}
#container {
position:relative;
margin:0 auto;
width : 800px;
text-align:left;
}
#header {
border-bottom:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
background-color:#4086AA;
margin-bottom : 15px;
height : 100px;
}
#subhead1 {
float:left;
color:white;
padding-left:10px;
font-size:30px;
line-height : 100px;
}
#subhead2 {
margin-top:5px;
float:right;
color:white;
padding-right:10px;
font-size:15px;
}
#leftnav {
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 157px;
padding-left:3px;
}
#leftnav2 {
margin-top:1px;
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 160px;
}
#events {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 157px;
padding-left:3px;
margin-top:15px;
margin-bottom:1px;
}
#events2 {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
float : left;
width : 160px;
}
#content {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
margin-bottom:1px;
width : 590px;
padding-left:5px;
}
#content2 {
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
color:white;
background-color:#4086AA;
width : 590px;
padding-top:2px;
padding-left:5px;
padding-bottom:2px;
}

Note your body {behavior} is invalid css.
 
Thanks for your help, it was my first time really doing a multi row column and wasn't sure
of where the div's belonged. I need the behavior so that the css background rollover works
in ie6, it's just javascript so maybe I can include it some other way.
 
You must log in or register to reply here.
Back
Top