SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Side by side content, not list items

    Just checking, is the best practice for displaying side by side elements that aren't list items to create a container div, and then divs within the container?

    Each div within the container would have a width and float declared. For example, on a horizontal div, I want two different text content to display, one text content box to the left and the other text content box to the right.

    I didn't really want to create divs inside the container element, but when I used the < p > element, they displayed as block, and the second < p > dropped to a second line.

  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)
    It all depends on the element concerned. I wouldn't add extra <div>'s just for the sake of it unless there's no alternative. By the sounds of your description you could quite easily float the paragraphs and give them a width to achieve what you're after without needing to use a <div>

    Remember that just because an item may be a block or inline element you don't have to rely on their default values and in most cases can style them as you wish.

    Hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for the quick reply. When I tried < p > with a specified width, however, the < p > content displayed as block elements. I even added display: inline to the id for the < p >, but they still displayed as block, with the right hand content dropping down.

    I must be missing something obvious. Here's the sample page, the CSS is embedded in the head.

  4. #4
    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)
    Yep, you just need to float the #view left as well...

    Code:
            #container {width: 700px; background: green; float: left;}
    	#view { float: left; width: 300px; background: pink;}
    	#changeview { float: right; width: 300px; background: yellow;}

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Duh! I must have removed the float at some point when I was editing. It was there at some point earlier today. Thanks for pointing out I need new glasses!

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For content that follow the div container, should I always add a clearing div, or expect that the next element in the code will have a clearing class/div added to it?

    For example:
    .clear {
    height: 0;
    font-size: 1px;
    margin: 0;
    padding: 0;
    line-height: 0;
    clear: both;
    }

  7. #7
    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)
    To be honest, I'd use Paul's method of clearing and use overflow on the parent instead of floating it in the first place as this will stretch to contain the children but also clear the float for anything that comes after it.

    So your code could become.

    Code:
    #container {width: 700px; background: green; overflow: auto;}
    	#view { float: left; width: 300px; background: pink;}
    	#changeview { float: right; width: 300px; background: yellow;}
    Hope that makes sense.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again! Paul's method seems to be very easy. Is there a need to add some type of hasLayout for IE when using Paul's method?

  9. #9
    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)
    You may need to add the following to get IE6 to play nice

    Code:
    * html #container {
      height: 1&#37;;
    }
    I think this is only needed though if there's no dimension within the parent... although I usually check and if it's not working in IE then the above usually fixes it.

    I know many people do use the clear method that you outlined above and this is fine but does require extra markup although you can just apply a clear to an element if there's one that follows.

    The overflow solution is by far the easiest and cleanest though once you get used to it


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
  •