Jump to content

simple float problem

MSUK1

By MSUK1
in CSS Help

 Share

Recommended Posts

MSUK1 Member

MSUK1

Posted
Posted

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>

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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.

Link to comment
Share on other sites
MSUK1 Member

MSUK1

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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.

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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!

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

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

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.