SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help!! div in css

    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

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up positioning...

    yes you're right i still have a lot of things to learn.... ok here are the codes.


    <style type="text/css">
    body {
    background-image:url(../images/bg2.jpg);
    background-repeat:repeat-x;
    background-position:bottom;
    background-attachment: fixed;
    height:100%;
    text-align: center;
    }
    #wrapper {
    margin: 0 auto;
    position:relative;
    width: 815px;
    height: auto;
    }
    #topbar {
    border: 2px solid blue;
    position:absolute;
    top:0;
    left:0;
    width:800px;
    height: 170px;
    }
    #main {
    background-color:#FFFFFF;
    position:absolute;
    top:180px;
    left:0px;
    width:800px;
    border: 2px solid blue;
    overflow:visible;
    }
    #div1 {
    position:absolute;
    top:0px;
    left:0px;
    width:394px;
    height:174px;
    }
    #div2{
    position:absolute;
    top:0px;
    left:0px;
    width:394px;
    height:174px;
    }
    #div3 {
    position:absolute;
    top:0px;
    left:0px;
    width:250px;
    height:243px;
    }
    </style>

    and here's the html

    <body>
    <div id="wrapper">
    <div id="topbar">
    <img src="../images/image01 copy.png" alt="" width="800" height="150" />
    </div>

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

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi, and welcome to Sitepoint

    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.

    Hope it helps

  6. #6
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •