Jump to content

Div Placement Using Float And Clear


himynameismark
 Share

Recommended Posts

I am very new to using the Div tag (used to be an old-school HTML tables guy), and decided to try to make a test page using external CSS using Div tags and classes. I just wanted to make sure I understood what to do with the Div tags using the Float and Clear attributes in CSS. Here is the code I have in my CSS file:

.left {	background: blue;	width: 24%;	float: left;	clear: left;	}.right {	background: black;	width: 24%;	float: right;	}.container {	background: yellow;	width: 50%;	}.top {	background: green;	width: 100%;	float: left;	clear: both;	}

So, it's supposed to have a line of green at the top, then immediately under, a small segment of blue on the left, a yellow area for the content, and a black segment on the right. The yellow, blue, and black are all supposed to touch and be immediately under the green. Here's my problem. The green works fine, the yellow and blue work fine, but there is a line break before the black Div. Keep in mind, this is just a test to make sure I know how to get the Div tags to work properly; I would never seriously use this particular layout for a real web page.Can somebody help me prevent this line break? Also, before the end of the code for ".right" I used to have "clear: right;" and it did the same thing.

Link to comment
Share on other sites

First off... CSS rules!Secondly... Please add a link if you have it live, or the html's side of the story.Also, a bit of advice since you're just getting into CSS. Try to maintain semantic markup. Most people switch to CSS not only for it's power in designing content globally, but also for how "lean" you can make your HTML. Using only <div> tags in the very beginning is okay. Some find it easier to get the gist of CSS, but in the long run it'll come and bite you. I've heard of using <div> tags too much being unofficially referred to as, "Divitis". Ha Anyway... there is a pretty good article here that can explain it better than I can.http://csscreator.com/?q=divitisI'm still not great at making table less websites... but not having "Divitis" anymore helped out a lot.:)

Link to comment
Share on other sites

I've heard of using <div> tags too much being unofficially referred to as, "Divitis". Ha Anyway... there is a pretty good article here that can explain it better than I can.http://csscreator.com/?q=divitis
good link
Link to comment
Share on other sites

  • 2 weeks later...

Wow, sorry guys, I didn't realize there were any replies to this. I figured out what the problem I was having was, but now I'm having other issues. I made another sample, a different one this time. This time the CSS is internal, so I'll post the entire code:

<!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" lang="en" xml:lang="en">	<head>		<title>			DIV Center Test		</title>		<style type = "text/css">			#container {				margin-left: auto;				margin-right: auto;				width: 920px;			}			#right{				width: 110px;				background-color: blue;				float: right;				display: inline;				position: relative;			}			#center{				width: 700px;				margin-left: 110px;				margin-right: 110px;				background-color: black;				display: block;				position: relative;			}			#left{				width: 110px;				background-color: blue;				float: left;				display: inline;				position: relative;			}			p {				color: white;				font-family: Arial, sans-serif;			}		</style>	</head>		<body>		<div id="container">			<div id="right">				<p>					right				</p>			</div>						<div id="left">				<p>					left				</p>			</div>						<div id="center">				<p>					center				</p>			</div>		</div>	</body></html>

The problem is, the left and right divs have 3 lines whereas the center div only has 1. The text is coming up on the second line on the left and right, and of course on the only line of the center div.Mr Ruckus, what is wrong with using divs?Also, is there a way to set up subscriptions on this forum or have it e-mail me when people post in threads I post in? I know I could do that on an old music forum I used to post in.

Link to comment
Share on other sites

Also, is there a way to set up subscriptions on this forum or have it e-mail me when people post in threads I post in? I know I could do that on an old music forum I used to post in.
at the top of the thread, there's an 'options' tab. from that click on track this topic. Edited by thescientist
Link to comment
Share on other sites

The problem is, the left and right divs have 3 lines whereas the center div only has 1. The text is coming up on the second line on the left and right, and of course on the only line of the center div.
What do you want it to do? Divs expand to fit the text inside them unless you tell them otherwise.
Link to comment
Share on other sites

Well this was just a test to make sure I could work with divs. I'm new to using them rather than tables, so I'm messing with stuff for now before I try to build anything real. I'm expecting each of the divs to be the same height because there is only one line of text in each. However, when I took out the <p></p> tags, they were all the same size. When I put them back in, the left and right floated divs have an extra line before and after the line including text, but the center div has no extra spaces.

Link to comment
Share on other sites

This seems to be another case of IE vs. the world - it works perfectly well on IE, but not on Mozilla. I'm not a CSS expert, or even fluent, so I'll need to defer to someone else to fix you :)

Link to comment
Share on other sites

I don't know...I made my own practice page with bare bones CSS and got exctly the same thing.You shouldn't have to, and it's ugly, but you can add padding-top:1em to all the divs and everything falls into place in FF. However, it goes mental in IE. There will undoubtedly be someone who knows how to fix this. In the interim, you could, if all else fails, write some kind of script that checks what the browser is and assigns CSS depending on the browser, so that IE gets what it wants (no padding), and FF gets the padding it needs.

Edited by chibineku
Link to comment
Share on other sites

Okay, here is my final attempt, using a bit of JS to sort out the styles. It checks the browser type, and uses a switch to either alter the id of the right, left and content divs in the event of Opera, keeps the originals in the event of IE or anything else, and uses an if clause to change to a third id in the event of Mozilla. for some reason Mozilla would not work in the switch, but works in an if statement. Here it is (well, here is my version, but you can take a few minutes adjusting the CSS properties to make blue backgrounds, etc. etc. The horizontal rule is to prove they're in line!

<html><head><title>Div trails and tribulations</title>	<script type="text/javascript">function adjustCSS(){var uA = navigator.userAgent;var browserType = "unknown";if (uA.indexOf("Opera") > -1) {  browserType = "Opera";} else if (uA.indexOf("Safari") > -1) {  browserType = "Safari";} else if (uA.indexOf("Konqueror") > -1) {  browserType = "Konqueror";} else if (uA.indexOf("Gecko") > -1) {  browserType = "Mozilla";} else if (uA.indexOf("MSIE") > -1) {  browserType = "Internet Explorer";}if (browserType="Mozilla") {document.getElementById("left").id="leftMoz"document.getElementById("right").id="rightMoz"document.getElementById("center").id="centerMoz"}switch(browserType) {case Opera:document.getElementById("left").id="leftOpera"document.getElementById("right").id="rightOpera"document.getElementById("center").id="centerOpera"break;default:break;}}</script><style type="text/css">#container{width:80%;align:center;margin-left:10%;}#left{float:left;width:20%;}#leftMoz{float:left;width:20%;padding-top:1em;}#leftOpera{float:left;width:20%;padding-top:2em;}#center{width:auto;}#centerMoz {width:auto;padding-top:1em;}#centerOpera {width:auto;padding-top:0;}#right{float:right;width:20%;}#rightMoz {float:right;width:20%;padding-top:1em;}#rightOpera {float:right;width:20%;padding-top:2em;}</style></head><body onload="adjustCSS()"><div id="container"><div id="left"><p>left</p></div><div id="right"><p>right</p></div><div id="center"><p>center</p></div></div><hr /></body></html>

Link to comment
Share on other sites

Browser detection is going to bring you a lot of trouble. Especially in Internet Explorer 8. It will detect it as IE and then render it wrong.Try this code, it should display basically the same in all browsers:

<!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" lang="en" xml:lang="en">	<head>		<title>			DIV Center Test		</title>		<style type="text/css">			body {				margin: 0 auto;				width: 920px;			}			#right {				width: 110px;				background-color: blue;				float: right;			}			#center{				margin: 0 110px;				background-color: black;				overflow: auto;			}			#left{				width: 110px;				background-color: blue;				float: left;			}			p {				margin: 1em 0;				color: white;				font-family: Arial, sans-serif;			}		</style>	</head>		<body>		<div id="right">			<p>				right			</p>		</div>				<div id="left">			<p>				left			</p>		</div>				<div id="center">			<p>				center			</p>		</div>	</body></html>

Edited by Ingolme
Link to comment
Share on other sites

Ingolme, what does overflow: auto do?And when you set margin: 0, 110px; I'm assuming 0 is for top and bottom, 110px is for left and right, correct?
Overflow: auto is the key to fixing the problem.When an element A with a top or bottom margin is placed inside a block level element B, the margins of A are transferred to B (I have never known exactly why). When using float, positioning or overflow on element B, this element becomes somewhat independent from the page flow, so that margins of anything inside it (A, for example) will be confined to the space inside it.Writing "margin: X Y;" is the same as writing "margin-top: X; margin-bottom: X; margin-left: Y; margin-right: Y;"
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...