Jump to content

Div related help required


shah

Recommended Posts

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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

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.

×
×
  • 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.