The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Simple DIV inside DIV Problem! HELP
KAD
post Dec 24 2011, 06:49 AM
Post #1





Group: Members
Posts: 3
Joined: 22-December 11
Member No.: 16,132
Hello,
my simple webpage consists of two columns which are floated left and right. Both these columns are inside a main DIV called 'content'. This content DIV has a background image which needs to expand when the left or right columns expand. But the left it doesn't work. please help! what am i doing wrong?
Here is the code. and here is a link to see what happens.

CODE
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>My site</title>
    <style type="text/css">
<!--
body {
    padding-top: 0px;
    background-color: #01111d;
    color: #3366FF;
    font-family: verdana, arial, sans-serif;
    text-align: left;
    letter-spacing: 1px;
}
#break {
    background-image:url(images/break.gif);
    width:873px;
    height:22px;
}

#content {
    background-image:url(images/content.gif);
    width:873px;
}

#left {
    float:    left;
    width:400px;
    overflow:auto;
    margin: 0px 0px 0px 85px;
}

#right {
    float:right;
    width:388px;
    overflow:auto;
    margin: 0px 0px 0px 0px;

}

#footer {
    background-image:url(images/footer.gif);
    background-repeat:no-repeat;
    width:873px;
}

#footer p{
    height:58px;
    width:873px;
    text-align:center;
    margin: 0px 0px 0px 0px;
    padding: 30px 0px 0px 0px;
    font-size:11px;
}

#middle {
    background-image:url(images/mid.gif);
    width:873px;
    height:21px;
}

#middle2 {
    background-image:url(images/middle2.gif);
    width:873px;
    height:22px;
}

-->
    </style>
</head>


<body>
    
    
        <div id="break"> </div>
        
        <div id="content">
               <div id="left">
                <p>LEFT Text 1<br></p>
                <p>LEFT Text 2<br></p>
                <p>LEFT Text 3<br></p>
                <p>LEFT Text 4<br></p>
                <p>LEFT Text 5<br></p>
               </div>
            
             <div id="right">
                <p>RIGHT Text 1<br></p>
                <p>RIGHT Text 2<br></p>
                <p>RIGHT Text 3<br></p>
                <p>RIGHT Text 4<br></p>
                <p>RIGHT Text 5<br></p>
               </div>
            
        </div>
    
             <div id="footer">
             <p>My footer text</p>        
             </div>


</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 24 2011, 11:40 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You don't understand how floats work, not that that is a wrong. wink.gif

Floats don't take up any space, they are taken out of the normal flow of the page, that's why the containing DIV doesn't expand. The floats hang out from it. There are some examples here.
http://www.w3.org/TR/CSS2/visuren.html#floats

To make the containing DIV expand you need to "clear the floats", as we lovingly call it. Basically you make the DIV recognize an element that's forced to be AFTER (below) the floats (that's Option 3), but there are also other, more complex, ways.
http://css-discuss.incutio.com/wiki/Clearing_Space

It helps to put borders or background colors on things and play around. That way it's easier to see what happens and it all becomes a little less esoteric when you can see that what the spec says really happens. Like the below. Now you make #outer contain the float. happy.gif

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Out of context</title>

<style type="text/css">

#outer   { border-top: 6px solid #f00; border-bottom: 6px solid #0f0 }
#floater { width: 200px; height: 300px;
           background: #f0f8ff; border: 2px solid #00f;
           float: right }

</style>

</head>

<body>

<div id="outer">
<div id="floater"></div>
</div>

</body>
</html>


Note that older IE versions have a problem with this and tend to contain floats when they shouldn't be contained. Don't know to what extent this has been fixed in the latest versions.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
KAD
post Dec 24 2011, 02:43 PM
Post #3





Group: Members
Posts: 3
Joined: 22-December 11
Member No.: 16,132
Thanx alot bro!! I used clear: both and added some content for now... thanx!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 09:14 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC