Css Float help

Roeg1

Roeg1

Roeg1

Associate
Joined
2 Nov 2007
Posts
551
im currently constructing a website in css and Im having a few issues
With the area within the #mainArea tag.

I've placed 3 divs in there and floated the ma1 id left ma2 none ma3 right

Now the left and right seems to work nicely but the center tag keeps wanting to push into the ma1 tag:confused: i guess its something to do with the float I've tried to clear any above float properties and I get a few results none the one I'm after though. Ie 3 divs that align side by side to each other ma1 and ma2 keep trying to wrap around each other.

Heres the code im using.
Any help will be much appreciated.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }


body {
	background-color: #e1dcea;
}
#background {
	background-image: url(Images/bg.jpg);
	background-repeat: no-repeat;
	width: 1128px;
	margin-right: auto;
	text-align: left;
	margin-left: auto;
}
#content {
	width: 906px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	height: 1000px;
	background-color: #FFF;
	background-image: url(Images/bg__content_center.jpg);
	background-repeat: no-repeat;
	padding-top: 10px;
}

#header {
	width: 856px;
	height: 88px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	border: 1px solid #CCC;
	margin-top: 0px;
}
#headerLinks {
	float: left;
	width: 400px;
	padding: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}



#headerLinks ul {
	margin: 0;
	padding: 48px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#headerLinks li {
	float: left;
}

#headerLinks a {
	display: block;
	margin-right: 1px;
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #999;
	border: none;
	background-color: #FFF;
	padding-top: 18px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
}


#headerLogo {
	float: right;
	padding-right: 12px;
	padding-top: 10px;
}
#mainArea {
	margin-top: 10px;
	width: 856px;
	border: 1px solid #CCC;
	margin-right: auto;
	margin-left: auto;
	height: 328px;
}
#ma1 {
	float: left;
	width: 200px;
}
#ma2 {
	width: 200px;
}
#ma3 {
	float: right;
	width: 100px;
}


#footer {
	text-align: center;
	background-color: #a496bf;
	height: 134px;
	margin-right: auto;
	margin-left: auto;
}
#footerContent {
	text-align: left;
	background-color: #b3a7ca;
	height: 134px;
	margin-right: auto;
	margin-left: auto;
	width: 906px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
}
#footerAddress {
	float: left;
	margin-top: 40px;
	margin-left: 27px;
}
.footerBrandName {
	color: #4a3084;
}
#footerMdTel {
	float: right;
	margin-top: 40px;
	margin-right: 27px;
}
</style>
</head>

<body>

<div id="background">
<div id="content">

<div id="header">
    <div id="headerLinks">
      <ul>
		  <li><a href="#">HOME</a></li>
          <li><a href="#">CONTACT US</a></li>
          <li><a href="#">SITE MAP</a></li>
		</ul>
    </div>
    <div id="headerLogo"><img src="Images/concentrics_lettings_logo.jpg" width="292" height="72" alt="Concentrics Lettings Logo" /></div>
    </div>
    

<div id="mainArea">
  <div id="ma1">Content for New Div Tag Goes Here</div>
  <div id="ma2">Content for New Div Tag Goes Here</div>
  <div id="ma3">Content for New Div Tag Goes Here</div>
</div>

</div>
</div>




<div id="footer">
<div id="footerContent">
  <div id="footerAddress"><strong class="footerBrandName">Address Line One</strong><br />
    Address Line Three<br />
    <strong>Address Line Three</strong></div>
  <div id="footerMdTel">Content for New Div Tag Goes Here</div>
</div>
</div>

</body>
</html>
 
Last edited:
Tripnologist said:
A better way would be to force the container to contain the floats. The biggest reason for doing it this way is that you don't have to insert an empty 'clear' div which is just bad practice.

Option 1: Apply overflow: hidden; to your float container and set a width.
Option 2: clearfix - http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
Click to expand...

Nothing wrong with the Clear DIV technique, it just works. I'll stick with that rather than mess around with more messy CSS, that might introduce more layout problems between different browsers.
 
What's wrong with it is that you're adding extra markup which isn't needed.

However, I wasn't trying to get you to change your preferred method as everyone has their own ways to do things, I was just letting the OP know that the method you posted is generally considered outdated, which it is.
 
Tripnologist said:
What's wrong with it is that you're adding extra markup which isn't needed [...]
Click to expand...
While you're right here, and the :after method is indeed more elegant, it might be worth pointing out that the markup need not be extraneous.

<hr />s for instance, are a handy block element bit o' markup that can have a "clear: both" descriptor applied where necessary.

They are a valid - in both senses of the word - solution to separating content areas, and they tend to be suitable in the places where "clear:both" would be needed.

So you're both right :p


/me goes back to tending his pigs, and awaits the inevitable facepalm...
 
simisker said:
the :after method is indeed more elegant..
Click to expand...

That was basically my whole point. It's more elegant, hence more widely considered to be the better way of doing it.

I listed overflow first as it's my preferred method but after doing a quick bit of reading (had to confirm that it was the best way to do it before spouting my mouth), I'm going to be going back to clearfix as suggested in this article.

I guess in the end it comes down to personal preference. Neater, purer html with clearfix, or a bit easier with div clearing.
 
Last edited:
Tripnologist said:
That was basically my whole point. It's more elegant, hence more widely considered to be the better way of doing it [...] I guess in the end it comes down to personal preference. Neater, purer html with clearfix, or a bit easier with div clearing.
Click to expand...
Agreed, though obviously I don't agree with div clearing when another, more valid element can be used instead - especially when it's part of progressive enhancement/graceful degradation/whatever-they're-calling-it-this-month practices.

Nice article link, too. Ta :)
 
Tripnologist said:
That was basically my whole point. It's more elegant, hence more widely considered to be the better way of doing it.

I listed overflow first as it's my preferred method but after doing a quick bit of reading (had to confirm that it was the best way to do it before spouting my mouth), I'm going to be going back to clearfix as suggested in this article.

I guess in the end it comes down to personal preference. Neater, purer html with clearfix, or a bit easier with div clearing.
Click to expand...

I'll give it a try out in my test site i have developed :) Thanks for the link too.
 
You must log in or register to reply here.
Back
Top Bottom