Div related help required

shah · April 29, 2009

hi everyone,

how do we place the three or multiple div on the same line horizontally. currently when i add a new division, it is placed below the first division.

Thanks

jcombs_31 · April 29, 2009

float the divs and set the width.

Yeodan · April 29, 2009

left: 10px;

top: 10px;

height: 10px;

width: 10px

position: absolute;

change the 10 by any number you need

you can set position to: absolute, relative, ... (don't know the others)

absolute uses left and top pixel ranges to position the div starting from the top left corner of your page

relative uses left and top pixel ranges to position the div based on the position it would normally be in

you can also use things like em, or even % (percentages) in stead of px (pixels)

Ken2k7 · April 29, 2009

jcombs_31 is right. Just float them and set the width.

jcombs_31 · April 30, 2009

left: 10px;

top: 10px;

height: 10px;

width: 10px

position: absolute;

change the 10 by any number you need

you can set position to: absolute, relative, ... (don't know the others)

absolute uses left and top pixel ranges to position the div starting from the top left corner of your page

relative uses left and top pixel ranges to position the div based on the position it would normally be in

you can also use things like em, or even % (percentages) in stead of px (pixels)

What you've posted is just more confusing and never really gives any clear answer to the OP.

If you need an example, you could follow something like this.

div {
  width: 25%;
  float: left;
}


<html>
<body>
  <div>Floated 1</div>
  <div>Floated 2</div>
  <div>Floated 3</div>
  <div>Floated 4</div>
</body>
</html>

That would give your 4 divs spanning 100% all next to each other.

Ken2k7 · April 30, 2009

Best to give those DIVs a class name. Otherwise, all DIVs on the page would be floated left.

jcombs_31 · April 30, 2009

This is true, but I was only giving an example. As far as I'm concerned you should always limit the amount of divs to the respective containers for the overall layout. HTML5 should help with more semantic markup, but I see plenty of people creating divs all over the place resembling table based layouts.

I would suggest giving each div an ID rather than a class to create the overall layout. You can then further modify the css for each id to get the desired effect.

TheFilmGod · April 30, 2009

You should just float the divs.

There seems to be a misconceptions. Floated divs do not need fixed widths. They'll shrink wrap for you anyway.

Make sure you clear the divs or clearfix the parent.

Like so:

<div class="child">content</div>

</div>

.parent {

overflow: auto;

}

.parent .child {

float: left;

}

I would suggest giving each div an ID rather than a class to create the overall layout. You can then further modify the css for each id to get the desired effect.

I disagree with jcombs -> You should give ids only to parent divs like #footer, #header, #main, #toolbar, etc. Then add classes within those parent divs to further distinguish content. Don't create an original id for every tag you need to style with css. This is counterproductive.

jcombs_31 · April 30, 2009

You should just float the divs.

There seems to be a misconceptions. Floated divs do not need fixed widths. They'll shrink wrap for you anyway.

Make sure you clear the divs or clearfix the parent.

Like so:

<div class="parent">

<div class="child">content</div>

<div class="child">content</div>

</div>

.parent {

overflow: auto;

}

.parent .child {

float: left;

}

I would suggest giving each div an ID rather than a class to create the overall layout. You can then further modify the css for each id to get the desired effect.

I disagree with jcombs -> You should give ids only to parent divs like #footer, #header, #main, #toolbar, etc. Then add classes within those parent divs to further distinguish content. Don't create an original id for every tag you need to style with css. This is counterproductive.

Maybe you should re-read what I said.

fry2010 · April 30, 2009

you should only give id's to elements that will only be required once, and classes to multiple elements.

I try to create as few div's as possible but usually end up with quite a few. How can you tell if you have used too many divs? The rule I go by is, if I need to position more than 1 parent element the same way, I put it in a div. Would others agree with this, cause I have always wondered about it.

TheFilmGod · May 1, 2009

you should only give id's to elements that will only be required once, and classes to multiple elements.

I try to create as few div's as possible but usually end up with quite a few. How can you tell if you have used too many divs? The rule I go by is, if I need to position more than 1 parent element the same way, I put it in a div. Would others agree with this, cause I have always wondered about it.

There is no limit, but a good rule of thumb is:

1) Don't use a div when a <p>, <h#>, or some other tag would suffice (don't do this - <div class="color_text_green">Text</div>

2) Cut to the chase - do you need a div to create margin or center something when you could apply directly to the tags?

3) Use lists aggressively

4) use clearfix instead of clearing divs (exceptions do exist)

fry2010 · May 1, 2009

Yeah thats basically what I do, thanks for confiming.

Instead of clearing divs, I use <br class="br_clear" />. Yeah if I need to clear a float, I always use clear:. So im on the right track then.

TheFilmGod · May 1, 2009

Yeah thats basically what I do, thanks for confiming.

Instead of clearing divs, I use <br class="br_clear" />. Yeah if I need to clear a float, I always use clear:. So im on the right track then.

Use the br clearing method sparingly. If you have a parent div that encloses all the floated divs just stick in an overflow: auto; onto the parent. It "clearfixes" for you. You could also put "clear: both" on the next tag in the flow of your document. These two methods should clear the divs for you 95% of the time. The only time I found myself using the a self clearing div is with Faux columns.

fry2010 · May 1, 2009

oh right, ill have to try that out... For some reason I have avoided overflow:auto. I cant remember why...

dbrimlow · May 3, 2009

right, ill have to try that out... For some reason I have avoided overflow:auto. I cant remember why...

Because you can end up with scroll bars.

I still use the "clearfix" method because it is guaranteed to work every time. Yeah, it is a pain to remember at first, but well worth it.

The clearfix method to auto clear floats uses the pseudo class ":after" on parent floats.

eg: for all parent elements (with floated elements within that are not clearing) that need to clear both sides, for instance #navbar and #footer, you would apply the clearfix as follows:

#navbar:after, #footer:after {

content: ".";
display: block;
height: 0;
margin:0;
padding:0;
clear: both;
visibility: hidden;
}

But it doesn't stop there because, IE (of course) doesn't recognize the pseudo-element ":after", AND triggers an IE "HasLayout" issue with floated elements (the contents can exceed the dimensions of the floated container if no height or height:auto is designated).

So the IE6 hack was simply to give IE6 a height of 1% (since the content would always be over 1% it forced IE to conform to the floated element's dimensions).

The hack to clear the float was:

* html #navbar, * html #footer {height:1%}

Simple.

BUT! in IE7 they fixed the bug that permitted the old "star" hack (* html), yet they didn't fix the reason the star hack was necessary - this triggered HasLayout for the clearfix.

The brilliant solution to force IE7 HasLayout AND clear the float before and after was the "first-child" pseudo element (which IE recognized) along with "min-height" (which it also now recognized) ... so to get IE7 to use a clearfix type auto-clear the hack is:

*:firstchild + html #navbar, *:firstchild + html #footer {min-height: 1px;}

Most pros use the cleafix method like so:

#navbar:after, #footer:after {
content: ".";
display: block;
height: 0;
margin:0;
padding:0;
clear: both;
visibility: hidden;
}
/* fix for IE6 */
* html #navbar, * html #footer {height:1%}
/* fix for IE7 */
*:firstchild + html #footer {min-height: 1px;}

Like I said, it's a pain to remember, but it works. There is also a way to trigger haslayout in IE7 using "zoom:1" and "display:inline-block", but they are not as common.

TheFilmGod · May 4, 2009

dbrimlow, I have to respectfully disagree with you on this one. Overflow: auto; works perfectly. Scroll bars only come up when you miscalculate the width of the parent. Instead of a hacking for IE I recommend using the overflow: auto; alternative which doesn't require "hacks" or other tricks to fool browsers to emulate the proper behavior.

Please provide an example if you believe overflow: auto; isn't sufficient enough in clearing divs.

dbrimlow · May 6, 2009

There is no right or wrong solution. Whatever technique works for you is the perfect solution.

Overflow: auto will indeed clear the float just fine, but for me it is an inelegant solution because it only works as intended for fixed "pixel-perfect" based layouts and not for fluid and liquid layouts.

I was never able to get it to be "bullet-proof" because I mainly now use % and ems for my columns and text, guaranteed to make overflow:auto generate scrollbars when someone bumps up the browser text, or decreases the window size.

If you are just 1px off you will end up with scrollbars.

Too many other things can blowup layouts, so I don't take chances with things I know I can control.

I DO use overflow:auto in certain circumstances (floated fixed elements, like photos or graphics, within a fluid box).

I also use a simple clear:both within the occasional floated header, paragraph or ul, ol, dl after certain block elements.

It depends on the situation. But I ALWAYS use a clearfix as my main clearing method.

And I don't always worry about the hasLayout hacks when not necessary because IE on the whole handles float clearing incorrectly from the spec (which actually FOR ONCE consequently achieves what we intend - clearing the floats).

The tough clear is in modern browsers and when using semantic markup - a paragraph immediately after a floated block, for instance will absolutely REQUIRE a clear in FF, Opera or Safari.

shah · May 12, 2009

HI all,

I am sorry to bother you again. i am stuck in another problem. when i try to use the following CSS style to centralize the div (wrapper or container).

margin: 0px auto 10px auto;

It centralizes the div horizontally but leaves some margin with the upper edge of the body. i want this wrapper to start right from the start. what should i do??

Thanks

jcombs_31 · May 12, 2009

Make sure you remove margins and padding from the body

body {
  margin: 0; padding: 0;
}

Sign In

Div related help required

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information