Forums

Arvid

I have a sidebar within the content div, and for some reason the Content div doesn't go all the way that the inside sidebar does, the sidebar stretches out of the box. Is there any way to fix this?

/* RESET */

* { margin: 0px; padding: 0px; }


/*Structure & colour */

body
{
	background: #666;
}
.wrapper
{
	width: 800px;
	margin: auto;
	background: #333;
}
.slideshow
{
	width: 198px;
	height: 200px;
	float: left;
	margin: 20px 25px 50px 50px;
	background: #FFF;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border: 1px solid #000;
	text-align:center;
}
.header
{
	width: 418px;
	float: left;
	margin: 20px 50px 50px 25px;
	background: #FFF;
	height: 200px;
	text-align: center;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border: 1px solid black;
}
.content
{
	width: 650px;
	margin: 0px 0px 100px 50px;
	background: #FFF;
	clear: both;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	padding: 10px;
}
.sidebar
{
	width: 200px;
	float: left;
	margin: 20px 30px 200px 30px;
	background: #fff;
	padding-bottom: 200px;
}
.footer
{
	background: #000;
	color: #FFF;
	text-align: center;
	clear: both;
}

Keyamoon

You didn't post your html so I'm not sure why that clear: both on your footer is not doing the trick.

Still, you might want to try adding overflow: hidden; to your wrapper.

Arvid

Overflow hidden didn't work. Worth mentioning is that with enough text it actually works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Analytikerna</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>

	<div class="wrapper">
    	<div class="slideshow">
        	<img src="images/bannerishere.unknownfileextension" />
        </div>
        <div class="header">
        	<h1>Psykoanalytikerna</h1>
            <h2> Prat om vad ni gör </h2>
        </div>
        <div class="content">
        	
            
        	<div class="shadow">
                <div class="sidebar">
                    <ul>
                        <li><a href=""><div>Hem</div></a></li>
                        <li><a href=""><div>Om oss</div></a></li>
                        <li><a href=""><div>Verksamhet</div></a></li>
                        <li><a href=""><div>Kontakt</div></a></li>
                        <li><a href=""><div>Info</div></a></li>
                    </ul>
                </div>
            </div>
            <h3>Startsida - Analytikerna </h3>
        	<p>Tralalalala</p>
        </div>
        <div class="footer">
        	<h4>Copyright analytikerna </h4>
        </div>
        
    </div>

</body>
</html>

Keyamoon

Your clearing should happen after and next to the floated box. your content doesn't have any float properties and so your footer is not clearing anything. As a quick fix, you might want to add a float: left to your container. Or, you may want to add a clear class to your css and then add this after your sidebar:

<br class="clear" />

However, you better use a grid system. This whole layout you are using right now is a total mess if i want to be honest with you.

Arvid

Thank you for the honest feedback. Please also tell me what about the code is messy so that I can learn and know better when I design a website again.

Keyamoon

Basically, you should use a grid system. My favorite is the one that comes with oocss. It will help you make any flexible layout very easily.

Arvid

Why should I use a grid system? I'm sorry if that question seems stupid, I've never heard of gridsystems before. Are there any arguments against using it?

Keyamoon

There are lots of benefits in using a grid system. I'd rather leave you with google.com and this video below =) http://developer.yahoo.com/blogs/ydn/posts/2009/03/website_and_webapp_performance/

glhf

TheDoc

Just to throw another opinion in here, I don't use grid systems nor will I any time in the near future. I have my own snippets and things that I use to save time, but any time I've ever attempted a grid system in the past I just end up changing everything that's in it anyways.

wolfcry911

I agree with Doc on this. While I design to a grid (in PS) I don't use a css grid system. But that's not to discredit Keyamoon's comment - some find a grid system invaluable.

To answer your question, you need to contain that float. Add overflow: hidden; to .content (not .wrapper) to do so.

SAiNT

hey Arvid, check this out:
http://css-tricks.com/forums/discussion/10722/clearing-floats-:-br-clear-all-...-:/#Item_6

also, there are many articles on the site on this subject.. Search "clearing floats".

Arvid

Wow, thanks a lot. You have really helped me, both your ways seem to work. I'll probably don't use a grid system for something this simple though. Thanks a lot everyone!

Arvid

Edited...

wolfcry911

using extraneous mark-up for float containment is frowned upon...

treehouse : what would you like to learn today?

Forums

Div collapsing