simple float problem

MSUK1 · March 27, 2011

the site i am building has content width 960px.

i wanted to add a three column layout, 310px each with a 15px gap inbetween.

the problem: i am adding the three columns plus gaps, into a c-wrapper, with a cream background. the three columns and gaps i float left. to alighn next to each other.

unless i float the c-wrapper the three boxes appear outside the c-wrapper div. and when i float c-wrapper to the left. it appears un-centered and stuck to the left side of the browser. despite the fact i am using margin left/right auto'd.

heres the code..

CSS:

/* 3 BOX LAYOUT
-------------------------------------------------------------*/
#c-wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
background-color:#FFF;
border-left:#470027 1px solid;
border-right:#470027 1px solid;
border-bottom:#470027 1px solid;
overflow:visible;

}

#box-one {
width:309px;
height:auto;
float:left;
}

#box-two {
width:309px;
height:auto;
float:left;
}

#box-three {
width:309px;
height:auto;
float:left;
}

div.gap {
width:15px;
height:auto;
}

HTML:

		<div id="c-wrapper">
        
			<div id="box-one"><h1>hello</h1><br /></div>
                <div class="gap"></div>
                <div id="box-two"><h1>hello</h1><br /></div>
                <div class="gap"></div>
                <div id="box-three"><h1>hello</h1><br /></div>
            
        </div>

cssfreakie · March 27, 2011

The trick here is overflow: hidden. When you supply a width, but not a height (or vice versa) the wrapper will shrink wrap around the inner elements.

You can read more on that trick here.

I cleaned up your code a bit, because it was pretty redundant. I also removed those bizar gap divs. We use margin for that in css. If you like I wrote something about it (css boxmodel) Also added some padding because it's nicer if text has some space between itself and the container. check it out ::)

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <title>MSUK1</title>
        <style type="text/css">
            /* 3 BOX LAYOUT
-------------------------------------------------------------*/
#c-wrapper {
width:960px; /* this object is 962 pixels width with the border */
margin: 0 auto 30px; /* changed */
background:#999;
border-left:#470027 1px solid;
border-right:#470027 1px solid;
border-bottom:#470027 1px solid;
overflow:hidden; /* changed  to hidden */
        color:#fff;
}
#box-one, #box-two, #box-three {
width:300px; /* so that's 3x300(+5*2 padding= 10) = 930,  that 30px left for margin*/
float:left;
        background:#333;
        padding:5px; /* notice the width calculating above */
}
#box-two{
    margin:0 15px; /* so top and bottom 0, left right 15px */
}

        </style>
    </head>
    <body>
       <div id="c-wrapper">
            <div id="box-one">
                <h1>hello</h1>
                <br />
            </div>
            <div id="box-two">
                <h1>hello</h1>
                <br />
            </div>
            <div id="box-three">
                <h1>hello</h1>
                <br />
            </div>
        </div>
    </body>
</html>

Hope it helps, if you have questions let me know.

MSUK1 · March 27, 2011

hi thank you i took your advice on the re-write for the box-1-2-3, so thank you for that!

im now having a content overflow problem.

first of all why hidden? will that not hide content?

second:

i had a div that was x width, and x height, but a centered image, which overlayed the gradient background. (no repeat on this image)

then inside that came the content.

that over-laid image is now being cut off, when my columns start.

Here is the code:

HTML:

<body>

<div id="layover">

<div id="socials">
    	
       <a href="/" title="Join XXX On Facebook">
        <img src="assets/img/icons/facebook.png" class="icon-so" width="32" height="32" alt="Join XXX On Facebook" /></a>
       <a href="/" title="Join XXX On Twitter">
        <img src="assets/img/icons/twitter.png" class="icon-so" width="32" height="32" alt="Join XXX On Twitter" /></a>
       <a href="/" title="Join XXX On YouTube">
        <img src="assets/img/icons/youtube.png" class="icon-so" width="32" height="32" alt="Join XXX On YouTube" /></a>

    </div>

  <div id="wrapper">
  
	<div id="menu">
        	
            <ul class="mainmenu">
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Home</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Biography</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">News</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Events</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Guestbook</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Competitions</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Music</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Videos</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Photos</a></li>
        		<li class="mainmenu"><a class="mainmenu" href="/" title="Home">Forums</a></li>
            </ul>
        
        </div>

   <div id="c-wrapper">

		<div id="col-one">
            	<div class="topboxth">
                	<h1>Latest News</h1>
                </div>
            	<div class="midboxth">
                
                <p>Coming Soon</p>
                
                </div>
            	<div class="botboxth"></div>
            </div>
                             
		<div id="col-two">
            </div>

		<div id="col-three">
            </div>
            		
        </div>
            
</div>
    
</div>

CSS:

/* BODY & HTML & LAYOUT
-------------------------------------------------------------*/
body {
background-color:#d9cec2;
background-image:url(../img/layout/repeatbg.jpg);
background-repeat:repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#521018;
line-height: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#layover {
background-image:url(../img/layout/divbg.jpg);
background-repeat:no-repeat;
background-position:center top;
width:auto;
height:auto;
margin:0px;
padding-top:292px;
}

#socials {
width:137px;
height:38px;
background:url(../img/layout/socialtab.png);
background-position:right;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-left:825px;
}

#wrapper {
width:960px;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
border-left:#470027 1px solid;
border-right:#470027 1px solid;
border-top:#470027 1px solid;
padding-top: 23px;
}

#menu {
background-color:#470027;
height:32px;
padding-top:18px;
width:auto;
}

div.clear {
clear:both;
height:15px;
}
div.clearsp {
height:15px;
width:auto;
}


/* TEXT TYPES
-------------------------------------------------------------*/
h1 {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
color:#470027;
font-size:22px;
}

h2 {
font-family:Rockwell, "Rockwell Extra Bold";
font-size:20px;
margin:0px;
color:#7E0045;
font-weight:200;
font-variant: small-caps;
}

h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#666;
margin:0px;
font-weight:100;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#521018;
font-weight:normal;
margin:0px;
}

/* MAIN MENU
-------------------------------------------------------------*/

ul.mainmenu {
list-style-type: circle;
list-style-image: none;
padding-left: 0px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
text-align: center;
}
li.mainmenu {
font-family:Rockwell;
display: inline;
font-size: 15pt;
font-weight: normal;
margin: 7px;
padding: 0px;
}

a.mainmenu {
color:#FFF;
text-decoration:none;
}
a:hover.mainmenu {
color:#FFF;
text-decoration:underline;
}
a:active.mainmenu {
color:#FFF;
text-decoration:none;
}
a:visited.mainmenu {
color:#FFF;
text-decoration:none;
}

/* 3 COL LAYOUT
-------------------------------------------------------------*/
#c-wrapper {
width:960px;
padding-top:10px;
padding-bottom:10px;
background-color:#FFF;
border-left:#470027 1px solid;
border-right:#470027 1px solid;
border-bottom:#470027 1px solid;
float:left;

}

#col-one, #col-two, #col-three {
width:310px; /* so that's 3x300(+5*2 padding= 10) = 930,  that 30px left for margin*/
float:left;
        background:#333;
}
#col-two{
    margin:0 15px; /* so top and bottom 0, left right 15px */
}

div.topboxth {
height:58px;
background-image:url(../img/layout/310boxt.jpg);
text-align:center;
padding-top: 1px;
}
div.midboxth {
height:auto;
background-image:url(../img/layout/310boxm.jpg);
padding-left: 10px;
padding-right: 10px;
}
div.botboxth {
height:10px;
background-image:url(../img/layout/310boxb.jpg);
}

/* ICONS
-------------------------------------------------------------*/
img.icon-so {
border:none;
margin-right:10px;
}

ive posted all of the CSS just because you never know what part might effect what. if you want a preview let me know?

MSUK1 · March 27, 2011

actually on second thoughts! i just read your blog and fixed it thank you \

if you have any clean up code suggestion please, advice welcome

cssfreakie · March 27, 2011

first of all why hidden? will that not hide content?

Read my article i linked it's named "fixing the clear fix" after that you will know why overflow hidden is suitable in this particular case.

As far as your second question, got a link to your site? I rather see a page instead of code ::)

-edit: lol, you read my article, so that solves question number 1 (didn't see you follow up post) , but if you have the link to the page i can have a look. I can allready say, try to use shorthand properties, much cleaner and easier to maintain.

MSUK1 · March 27, 2011

http://bit.ly/dGGBKi

URL shortened for convenience of SEO

cssfreakie · March 27, 2011

Just aside: I would put some white spotlight behind the title "stacey", to draw some more attention to it. right now your navbar is asking alot of attention. (not a css thing but i just i share it)

as for the code it looks okay, I would leave the empty lines out though and i would use cleaner indentation.

Btw, this is bad use min-height instead:

<div class="midboxth">
                
                <p>Coming Soon</p>

                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>

                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>

                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>

                <p> </p>
                <p> </p>
                
              </div>

like this:

div.midboxth {
    background-image: url("../img/layout/310boxm.jpg");
    min-height: 400px;/* like here */
    padding-left: 10px;
    padding-right: 10px;
}

Apart from that some shorthand css could limit the amount of lines you are using.

Hope this helps!

MSUK1 · March 27, 2011

hehe, sorry all the <p>'s where just me tessting the stretch as if their was X amount of lines...

and as for the menu what do you mean?

cssfreakie · March 27, 2011

Just load your page, the page is about "stacey" the first things your eyes are directed to is the navigation bar. Instead of the brand "stacey" By placing some spotlight behind that word, it will pop out more and the first things the eyes are directed to is the brand! ::) Just an idea

Sign In

simple float problem

Recommended Posts

MSUK1

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

MSUK1

Link to comment

Share on other sites

MSUK1

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

MSUK1

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

MSUK1

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information