CSS Forum

**b0881** · 08-20-2007, 02:10 PM

I am having a few issues with a layout I am attempting to create.

Bascially I have a div with my header in, and below it I am creating a split for navigation and content. Two divs down the left, one below the other, and one adjacent on the right along side it.

I can create them fine and they display correctly, only the text within the div on the right only starts in line with the second div on the left hand side.

I am bascially use the float left and the float right functions for the respective divs, but Im unsure how to get the text to align correctly.

I realise this may be a little hard to understand, Ill try to get a picture up to make it a little clearer but in the mean time any help would be greatly appreciated.

Thanks in advance.

**LadynRed** · 08-20-2007, 05:51 PM

Rather than posting a picture, lets see the code. It's impossible to know what may be affecting the results from a picture.

**b0881** · 08-21-2007, 12:52 PM

The following is the CSS for the layout of my document

Code:

.wrapper {
    width: 650px;
    margin: 0px auto;
}

.top-left {
    float: left;
    width: 260px;
    height: 86px;
    background: url(images/topleft.jpg);
}

.top-right {
    float: right;
    width: 390px;
    height: 86px;
    background: url(images/topright.jpg);
    margin: 0px 0px 0px 260px;
}

.navigation {
    clear: both;
    width: 650px;
    height: 79px;
    background: url(images/navbg.jpg);
    margin: 0px auto;
}

.headerleft {
    float: left;
    width: 390px;
    height: 219px;
    background: url(images/headerleft.jpg);
}

.headerright {
    float: right;
    width: 260px;
    height: 219px;
    background: url(images/headerright.jpg);
}    

.contentwrapper {
    float: left;
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    background: url(images/contentwrapbg.jpg);
}

.contentleft {
    float: left;
    width: 390px;
    background: url(images/contentleft.jpg);
}

.contentleftbox1 {
    float: left;
    width: 390px;
    background: url(images/contentleft.jpg);
}

.contentleftbox2 {
    float: left;
    width: 390px;
    height: 180px;
    background: url(images/contentleftbox2.jpg);
}

.contentright {
    float: right;
    width: 260px;
    background: url(images/contentright.jpg);
}

.footerleft {
    float: left;
    width: 390px;
    height: 37px;
    background: url(images/footerleft.jpg);
}

.footerright {
    float: right;
    width: 260px;
    height: 37px;
    background: url(images/footerright.jpg);
}

The html just defines the divs, any help will be appreciated.

**LadynRed** · 08-21-2007, 01:02 PM

Need to see the HTML too.. sorry

The way your HTML is laid out is important too.

**b0881** · 08-21-2007, 01:07 PM

Its a standard page created in dreamweaver so dont tell me off for incorrect doctype or any excess code, that'll be cleaned up later

Thanks

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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="test.css" rel="stylesheet" type="text/css" />

</head>
<body class="bg1">

    <div class="wrapper">
    
        <div class="top-left"></div>
        <div class="topright"><img src="images/topright.jpg" /></div>
        
        <div class="navigation"></div>
        
        <div class="headerleft"></div>
        <div class="headerright"></div>
        
        <div class="contentwrapper">
        
            <div class="contentleftbox1">
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            </div>
            
            <div class="contentleftbox2">
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            <p>bobby bobby bobby bobby bobby bobby bobby bobby</p>
            </div>
            
            <div class="contentright">
            <p>bobby bobby bobby bobby bobby bobby bobby </p>
            <p>bobby bobby bobby bobby bobby bobby bobby </p>
            <p>bobby bobby bobby bobby bobby bobby bobby </p>
            <p>bobby bobby bobby bobby bobby bobby bobby </p>
            <p>bobby bobby bobby bobby bobby bobby bobby </p></div>
        
        </div>
        
        <div class="footerleft"></div>
        <div class="footerright"></div>
        
    </div> 
    
</body>
</html>

**b0881** · 08-22-2007, 04:45 PM

still no luck regarding this issue so any help would be greatly appreciated

**LadynRed** · 08-22-2007, 11:37 PM

Ok you have to do 1 of 2 things:
1- wrap the 2 boxes, contentleftbox1 and contentleftbox2 inside their own box, call it contentleft, or
2 - in the HTML, move the contentright box to be right AFTER contentleftbox1

You also need to clear your floats, 1 before the navigation box, and again before you close the contentwrapper div. The 'clear: both" doesn't cut it.

I use this method:
.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
then use <br class="brclear" /> in the html, works like a charm every time.