CSS Forum

**itsnetservices** · 01-23-2008, 12:16 AM

Hello, I have a new design I'm just trying to finish up and the majority of it has gone well. It's a simple 2 column layout, with the left container floated left, and the right container floated right (obviously).

However, I have some elements that are overlapping each other, and I'm pretty sure I just need to add a clear attribute to one of my classes, but I haven't been able to figure out where yet. I have experimented and added them in several different places, and used some solutions I found on this website to try and get it working but to no success.

I am hoping someone can slap me silly and open my eyes as to where I should add the clear attribute to fix my problem.

The xhtml is here:
http://itsnetservices.com/qst/

The CSS is here:
http://itsnetservices.com/qst/styles.css

Funniest thing about it is, it's actually is working correctly in IE6 of all browsers. Amazing!

**chrishirst** · 01-23-2008, 03:27 AM

Quote:

Funniest thing about it is, it's actually is working correctly in IE6 of all browsers. Amazing!

Nope, just another example of IE doing what it thinks you want rather what the code tells it to be doing.

clear:both on div_spacer.

**itsnetservices** · 01-23-2008, 03:36 AM

Thanks for the reply Chris, however it didn't seem to work. I actually tried that one earlier to no avail.

Any other ideas?

Thanks
-Adam

**chrishirst** · 01-23-2008, 04:12 AM

the problem is you have the title_bg set at 28px high and all the content for the item is inside it rather than just the title heading.

**chrishirst** · 01-23-2008, 04:14 AM

BTW

IE is simply doing it's usual " I'll ignore this height 'cos it means min-height in my world" and expand the div to fit the content

**LadynRed** · 01-23-2008, 11:35 AM

You might want to read up on IE's vagaries here:
http://www.positioniseverything.net/ie-primer.html and
http://www.positioniseverything.net/explorer.html

Then on clearing space:
http://css-discuss.incutio.com/?page=ClearingSpace

**itsnetservices** · 01-23-2008, 02:23 PM

Geeze. You were right of course Chris..

What a jerk I am for missing that. Haha

Thanks again you guys! You truly are saving lives.

And thanks for the links LadynRed i will definitely read up on them.

-Adam

**futurevisions** · 01-24-2008, 03:18 PM

I believe I have a similar issue here:

http://future-visions.co.uk/nl.co.uk/beta/

The content div and menu div both have float attributes which is causing a few issues:

1. The footer (white box hovering over the top) is in the wrong place (it's hovering over the top!)

2. Inserting line breaks between it and the main content causes it to move down, but that will cause problems when the height of the content/menu changes

3. There are a series of line breaks beneath the footer which keeps the background image in check. This certainly isn't ideal, and I'd like to understand the underlying problem. Without the line breaks, the background image only covers the title bar image. Basically, it completely ignores the floating divs, as the footer seems to do.

Adding clear: both to the footer div works, but doesn't seem to let me use margin-top property.

Any help would be very much appreciated.

http://future-visions.co.uk/nl.co.uk/beta/screen.css

**itsnetservices** · 01-24-2008, 03:34 PM

Hi Nathan,

I think I fixed your problem for you.

First I moved your footer div outside the main div, then i added the following to your footer styles:

Quote:

margin:0 auto 0 auto;
width:780px;

And then, where the footer used to be, I added a cleared div:

Quote:

<div style="clear:both;"></div

After that i was able to remove all your <br>'s and it seems to be fine now.

Here is the complete code for each.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <title>nathanlittleton.co.uk in the making.</title>
    
    <meta name="author" content="Nathan Littleton" />
    <meta name="keywords" content="nathan, littleton, web, design, designer, photography, photographer, west, midlands, birmingham, business, entrepreneur" />
    <meta name="description" content="Nathan Littleton's personal website - COMING SOON." />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
    
    <link href="nathan.css" rel="stylesheet" type="text/css" />
</head>

<body>
    
    <div id="holdbox">
        <img src="images/titlebar.jpg" alt="nathanlittleton.co.uk">
        <div id="insidebox">
            
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis augue in 
                sapien luctus suscipit. Etiam sit amet velit. Mauris imperdiet porttitor felis. 
                Suspendisse fermentum accumsan quam. Sed diam diam, ultrices sed, mollis a, viverra 
                vel, arcu. Donec felis est, tincidunt eget, placerat in, tincidunt at, leo. 
                Pellentesque condimentum interdum felis. Donec fermentum faucibus urna. Cras vitae 
                ligula. Quisque sed ligula. Maecenas velit felis, feugiat et, pellentesque id, lacinia 
                id, libero. Etiam ligula. Vivamus fermentum lacus ac nisl. Donec interdum ligula 
                ut turpis. Quisque ante purus, porta elementum, tincidunt nec, volutpat in, ipsum. 
                Donec ligula. Sed commodo. Cras varius augue fermentum ipsum. Integer in lacus. Aenean tellus.</p>

                <p>Aliquam pulvinar vehicula nulla. Duis et mauris vel ipsum tincidunt tincidunt. Donec 
                arcu ipsum, suscipit aliquet, rutrum rhoncus, laoreet ut, elit. Integer scelerisque 
                consequat mi. Aliquam erat volutpat. Nunc commodo dictum ante. Vestibulum varius placerat 
                purus. Nulla sem. Nulla adipiscing felis sed metus. Morbi eu ipsum. Aliquam eu est nec sem 
                accumsan sodales. Etiam id lectus vitae augue posuere elementum. Vestibulum enim mauris, 
                accumsan eget, tempor id, pulvinar nec, nunc. Fusce mauris. Nunc nec tortor vitae libero 
                nonummy pretium. Mauris nisi. Suspendisse nibh. Maecenas vehicula interdum diam. Quisque 
                tempus interdum libero. Donec dignissim sapien id nisi.</p>

                <p>Integer id augue posuere sapien auctor elementum. Quisque pharetra arcu quis nunc commodo 
                feugiat. Proin purus nunc, luctus et, consequat in, aliquam eu, odio. Curabitur facilisis 
                bibendum velit. Quisque in nibh vitae eros interdum sagittis. Sed nisl sem, molestie eget, 
                eleifend porttitor, faucibus sit amet, tortor. Ut congue, leo at laoreet interdum, lectus 
                augue aliquet nulla, accumsan ornare lacus odio quis orci. Etiam tristique magna. Cras in 
                eros. Vivamus pede mi, volutpat quis, tristique sed, lacinia nec, nunc. Donec nulla magna, 
                ornare id, condimentum id, luctus eget, erat. Sed nunc. Nam tellus dolor, mattis et, egestas 
                rhoncus, ultrices ac, justo. Vestibulum at est.</p>
                
            </div>
            
            <div id="menu">
                <p>Aliquam pulvinar vehicula nulla. Duis et mauris vel ipsum tincidunt tincidunt. Donec 
                arcu ipsum, suscipit aliquet, rutrum rhoncus, laoreet ut, elit. Integer scelerisque 
                consequat mi. Aliquam erat volutpat. Nunc commodo dictum ante. Vestibulum varius placerat 
                purus. Nulla sem. Nulla adipiscing felis sed metus. Morbi eu ipsum. Aliquam eu est nec sem 
                accumsan sodales. Etiam id lectus vitae augue posuere elementum. Vestibulum enim mauris, 
                accumsan eget, tempor id, pulvinar nec, nunc. Fusce mauris. Nunc nec tortor vitae libero 
                nonummy pretium. Mauris nisi. Suspendisse nibh. Maecenas vehicula interdum diam. Quisque 
                tempus interdum libero. Donec dignissim sapien id nisi.</p>
            </div>

            <div style="clear:both;"></div>
            

        </div>
    </div>
<div id="footer">
                <br /><br />
            </div>        

</body>

</html>

CSS

Code:

/* ---------------------------------------
    CSS Stylesheet for http://www.nathanlittleton.co.uk
    All content copyright Nathan Littleton
--------------------------------------- */

/*
    1. Add website address to ^^ above notice
    2. Define base properties for links, body, text (p, body), img
    3. Delete selectors and groups you KNOW you won't use
    4. Follow web project workflow

    5. When dev begins, delete these comments ;)
*/

/* ---------------------------------------
    STRUCTURE
--------------------------------------- */
html{
;
}

body{
font-family: "Lucida Sans", Verdana, "Trebuchet MS", Tahoma, Serif;
background-color: black;
font-size: 9pt;
color: #f2f2f2;
text-align: center;
}

/* ---------------------------------------
    COMMON
--------------------------------------- */
*{
padding: 0;
margin: 0;
}

p,li{
line-height: 150%
}

img{
border: none;
}
/* ---------------------------------------
    LINKS
--------------------------------------- */
a:link{
color: red;
text-decoration: none;
background-color: white;
}

a:active{
color: red;
text-decoration: none;
background-color: white;
}

a:visited{
text-decoration: none;
color: red;
background-color: white;
}

a:hover{
text-decoration: underline;
color: black;
background-color: white;
}

/* ---------------------------------------
    HEADINGS
--------------------------------------- */
h1{
;
}

h2{
;
}

h3{
;
}

/* ---------------------------------------
    FORMS
--------------------------------------- */
form{
;
}

input{
;
}

select{
;
}

textarea{
;
}

/* ---------------------------------------
    FIXED CONTENT AREA
--------------------------------------- */
#holdbox{
width: 780px;
margin-left: auto;
margin-right: auto;
background-image: url('images/bg-shadowbox.jpg');
background-repeat: repeat-y;

}

#insidebox{
margin-left: auto;
margin-right: auto;
width: 710px;
padding-left: 20px;
padding-right: 20px;
}

/* ---------------------------------------
    MENU NAV
--------------------------------------- */
#menu{
width: 195px;
float: left;
text-align: justify;
}

/* ---------------------------------------
    CONTENT
--------------------------------------- */
#content{
margin-left: auto;
margin-right: auto;
padding-right: 20px;
width: 490px;
float: left;
text-align: justify;
}

/* ---------------------------------------
    FOOTER
--------------------------------------- */
#footer{
background-color: white;
margin:0 auto 0 auto; 
width:780px;
}

Please let me know if this helped at all.

**LadynRed** · 01-24-2008, 04:03 PM

Try it this way:

Quote:

#footer{
background-color: white;
margin: 20px auto 0 auto;

}

add this
.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then the html:
</div>
<br class="brclear" />
<div id="footer">
<p>footer </p>

</div>

</div>
</div>

Footer stays at the bottom. If the top margin isn't what you want, try adding padding or margin to the bottom of #content instead.

**futurevisions** · 01-24-2008, 04:06 PM

It looks like that has worked! Thanks very much!

http://future-visions.co.uk/nl.co.uk/beta/

Thanks to you, my progress bar has gone up a few percent! :P http://future-visions.co.uk/nl.co.uk/

**LadynRed** · 01-24-2008, 04:09 PM

You're welcome