hi.. im just new in css and i am having trouble with my div. i want to make a main div that contains 3 or more divs inside it. if my sub divs is absolute positioned the main div doesn't extend its height, so my page is kinda messed up. can you please help me with this.... any help will be very much apreciated
As you've not provided any code or a link I'm taking a best guess at what you're trying to achieve.
Absolute positioning shouldn't be used unless you're completely aware of why you're using it. As you're having problems with it then I'm guessing that you don't understand the pitfalls of using absolute or relative positioning (or are using the drag and drop features in dreamweaver which is bad!!).
For positioning, I'd recommend starting off with floating elements for positioning and applying padding and margin's to position things accurately.
If you can provide some code or a link then I'll be able to be a bit more specific about your problem.
<div id="main">
<div id="div1"><img src="../images/image03.jpg" alt="" width="400"/></div>
<div id="div2"><img src="../images/image04.jpg" alt="" width="400"/></div>
<div id="div3"><img src="../images/image05.jpg" alt="" width="250"/></div>
</div>
</div>
</body>
please correct my codes if you see errors in it, thanks for helping me.... i really appreciate it.
That code would most likely position the 3 divs on top of each other...
Can you post (or link to, as attachments need to be approved here) a picture of what you want this to look like (it would help to determine the correct semantic elements to use)? or a link to a site showing what you already have?
When you position something absolutely you remove it from the normal flow of the document - what this means is that it will no longer effect any of the other elements around it one bit, so because all of #main's children have been removed #main no longer has a height.
You also have your three divs starting in exactly the same position (the top left corner of #main) i'm not sure what positioning you are wanting.
You can position things absolutely but you need to have something in there that sets the height - it can be explicit height:243px; as that's the largest of the children, or you can leave one of the elements in the normal flow which will control the height of the parent.
Floating is the preferred method of positioning things horizontally - as floated elements do interact with the other elements around them.
If you can explain what type of layout you are wanting we can suggest what's the best method to use.
ah..!!! i'm sorry about that centauri and markbrown4. i mistype the codes. actually all the three divs have they're own different position i just copy and paste it here when i post it and forgot to change it. and markbrown thanks for your advice it really helps, now i have a better understanding about absolute positioning. i positioned the three sub divs absolutely and that's the reason why the main div doesn't extend it's height? because the three divs has been remove from the flow so the main div doesn't recognize them, am i right markbrown4?
Yes, that is basically why the div does not expand.
However, 4 images in 5 divs means absolutely nothing as far as site content goes - the reason that I would like to see what you are wanting to achieve is to suggest a more semantic markup as well as positioning methods - the divs may not even be required at all.
ah... now i get it. thanks to you and also to markbrown, hmmm... divs are not required? so you think that it is better if i'm just going to position those images using floats and margins rather than putting them inside different divs, is that what you mean?
If a div is only holding one element. it is usually an indication that the positioning styles can be applied directly to the element and the div dispensed with - a div is more properly used to group like content.
What is the purpose of the images? Do they convey information? Images mean absolutely nothing in the context of content - screen readers can't see them, search engines cannot interpret what they mean. If the images present information (like an image of text), then that information should be marked up semantically in the html to provide meaning to the page - this information can be displayed as the image via the css styling to provide visual enhancement for visual readers.
positioning...
Posting Permissions
Bookmarks