Placing three "Boxes" in a div

Discussion in 'CSS' started by jabz.biz, May 14, 2008.

  1. #1
    Hi,
    I have so many different solutions for my problem, but I`m still looking for the best one. This is what I have so far:

    <div id="header"></div>
    HTML:
    with the following styles:

    #header{
    	background:#ecebe5;
    	height:165px;
    	width:1350px;
    	margin:0 auto;
    	border-top:10px solid #12A1C9;
    	}
    HTML:
    Now I want to place 3 segments inside the header. Although I could use divs again, or paragraphs,... I still cannot decide what the best solution would be.

    <div id="header"><div></div><div></div><div></div></div>
    HTML:
    Seems quite dirty, paragraphs look better, but isn`t there another solutions? I only want to put text and images in these boxes.

    Any Ideas? Thanks.
     
    jabz.biz, May 14, 2008 IP
  2. web-master

    web-master Peon

    Messages:
    838
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I just make more div's inside. It does the trick.
     
    web-master, May 14, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Let the content determine what to use. Div is just a catch-all for "divider" or "division" of the page...

    some folks put images inside p tags. I don't because an image is not a paragraph but others argue that it conveys the same information as one. Whatever. So usually yeah, it'd be a div but you can also have loose paragraphs around the text and the images could be floated (by themselves) if you want.

    But let content dictate the tags, not other way around. Otherwise you get Tag Soup.
     
    Stomme poes, May 14, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It really depends on what you want to do with the segments I guess, for example if it's an image then it doesn't need to be inside a DIV and you don't want to be using paragraphs because they are meant to be used for paragraphs!
    You could even get away with just the header DIV dependant upon how you want the segements layed out and the content inside them. If you let us know we can surely help with the best possible solution!!

    Also on top of this your header with is extremley large, most people will have to scroll horizontally, which is something you should always try and avoid!! There are many other alternatives such as setting a smaller width, or even a % based on browser sizes!!

    But as for your original problem outline what you plan to add inside each section!!
     
    wd_2k6, May 14, 2008 IP
  5. jabz.biz

    jabz.biz Active Member

    Messages:
    384
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    70
    #5
    hmm, thanks for your replys. A picture in a paragraph...is not nice. Right.
    I came up with an inline list, as another solutionthe images I can put in the background. I think I go with that, makes the most sense. :) Div`s wrapped in divs is always unclean, so I won`t do that.
     
    jabz.biz, May 14, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Well, you can and sometimes have to have divs in divs, sure, but if there's a better (more suitable) element for your things, use it instead. I use divs to group other elements all the time (such as, stuff in a sidebar is generally a div called #sidebar etc..)

    background images is nice, generally a better approach since 99% of all images are not content but making the web page look nice, thus belong in the background.. the exception being image replacement, charts and graphs, banner ads, how-to images, and the like.
     
    Stomme poes, May 14, 2008 IP