SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margins and positioned divs

    I have a div container which is postioned relative, which i use for messages.

    Inside the container, i have 2 divs of different widths are they are both positioned absolute so they sit side by side.

    The problem is becuase I don't know how long the message is going to be, i haven't set a height on any div and it is squashing all the content on top of each other, and not have a div with it's content under each of the other divs

    I was able to get this to work by floating the inner divs left but then i couldn't get my 30px margin between each of the out divs

    Code CSS:
    div.message {
    	margin: 0px 0px 30px 0px;
    	border: 1px solid #ccc;
    	position: relative;
    }
     
    div.tdLeft {
    	width: 130px;
    	left: 0;
    	top:0;
    	position:absolute;
    	padding: 10px;
    }
     
    div.tdRight {
    	width: 690px;
    	left: 130px;
    	top:0;
    	position: absolute;
    	padding: 10px;
    }

    and the html for each div
    Code HTML4Strict:
    <div class='message'>";
         <div class='tdLeft'><p>Posts: </p></div>
         <div class='tdRight'><p></p></div>;
    </div>

  2. #2
    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)
    Code:
    div.message {
        margin: 0px 0px 30px 0px;
        border: 1px solid #ccc;
        position: relative;
        overflow: hidden;
    }
     
    div.tdLeft {
        width: 130px;
        float: left;
        padding: 10px;
    }
     
    div.tdRight {
        width: 690px;
        float: right;
        padding: 10px;
    }
    The overflow setting will force the .message div to actually surround the floated contents.

  3. #3
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, taking the extra punctuation marks out of your code (" and and adding some text to see what is going on, it actually looks good in IE7. You have to add the padding to the widths, though, to get the absolute divs to position correctly (tdRight's left property should be 150px). The 1px border around div.message becomes basically a straight line since positioning the two inner div's absolute takes them out of the document flow. In IE7 the two divs grow down to show all of their content with no problems. What does the rest of you code look like? What browser are you using? Did you validate your code?

  4. #4
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Centauri:

    Why does going from overflow: visible (default) to hidden make the floats appear inside the containing message div with the 1px border all around instead of the border colapsing to nothing (appears as a 2px high horizontal line) above the floats? Are the floats inside the div or not? I would have thought that, reading the description of the overflow property, that the only difference would be that the floats might exceed the div border rather than being clipped. Does the lack of a specific height have anything to do with it? Where is this described in the spec?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    It's simple containing floats. Normally if it is not set to visible then the floats will hang out of the container because floats are taken out of the flow of the natural document. The div has collapsed to 0 height because of the collapsing. Basically adding overflow:hidden; (or any other overflow) will basically give glasses to the div. It will contain the floats and allow for ajacent elements to clear
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    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)
    Floats are removed from the normal document flow, and the parent element will normally collapse in height, with the floats hanging out the bottom. Not sure exactly where in the specs (Paul has quoted it before) this behaviour is noted, but a setting of anything other than the default will cause an element with undefined height to surround floated content, presumably to determine whether any action needs to be taken in respect of the overflow. This is a common method of float clearing, and further mention is made of this in the Sitepoint Reference and in Paul's CSS FAQ sticky thread at the top of this forum. IE6 doesn not understand this, though, but triggering HasLayout on the element (via a set dimension) will cause the same behaviour.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
    http://www.w3.org/TR/CSS21/visuren.html#floats
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you for the expanation, and to Ryan for the spec reference.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Your not welcome... If you have any more questions just shove it.
    Last edited by RyanReese; Apr 7, 2009 at 16:27.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That does the job....looks much better now

    Another quick question which should be simple enough

    On top of those divs, I would like to position a link with a background image which will take the user to another page. I only want it once.

    I have got the link to display a background image and it's the right size but it's on the left and i want it on the right.

    The div that it's in hasn't got any style but it's 100% width. I tried postioning the div relative and postioning the link absolute but it goes inside of the first message div

    Code HTML4Strict:
    <div><a id='topreply' href=''>Reply</a></div>
    <div class='message'>";
         <div class='tdLeft'><p>Posts: </p></div>
         <div class='tdRight'><p></p></div>;
    </div>

    Code CSS:
    a#topreply {
    	display: block;
    	color: #FFF !important;
    	height: 25px;
    	width: 142px;
    	background: url(images/treply.gif) no-repeat; 
    	font:bold 11pt Arial,Verdana,sans-serif;
    }

  11. #11
    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 you want the text on the right hand side, add text-align: right; to the div styles.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    There is no need to use AP'ing here. text-align will allow you to position elements on the right hand side. Either place the text-align on the children of the div or on the actual div itself.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •