SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Divs next to Divs Question???

    Hi Folks.

    This is probably a daft question. I've kinda forgot how to do this and couldn't find any solution through searching the forum.

    I want to place 2 Divs containing images next to each other but just can't seem to get them side by side. These 2 Divs are nested inside another main Div. No matter what I do, I keep getting the second one below the first one. I've tried floating them left and right but get too big a gap between them. The floating also results in some of my text showing up in between the Divs as opposed to starting below them which is what I want. Here's a link and some code.

    http://www.gta-jutecity.pwp.blueyond...n%20Fight.html

    <div id="middlecolumn">
    <br />

    <h1>
    Gun Fight <br />
    &copy; 1975 Midway
    </h1>

    <div id="screent">
    <img src="/arcade/images/gunfight-t.png" alt="Gunfight Titlescreen" />
    </div>

    <div id="screens">
    <img src="/arcade/images/gunfight-s.png" alt="Gunfight Screenshot" />
    </div>

    <br /> <br /> etc. etc etc...

    </div>
    #screent {
    position: relative;
    top: 20px;
    left: 12px;
    width: 256px;
    height: 224px;
    padding: 12px;
    border: 5px solid #328CF0;
    background-color: #000000;
    }

    #screens {
    position: relative;
    top: 20px;
    left: 310px;
    width: 256px;
    height: 224px;
    padding: 12px;
    border: 5px solid #328CF0;
    background-color: #000000;
    }
    Can anyone please tell me how to fix this problem? The sad thing is, I'm sure I've solved this problem once in the past but can't seem to remember how to do it


    Regards.

    Stewarty-Boy.

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Yeppoon, Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    Yep know the feeling. This should get you going:

    Code:
    #screent {
      float: right;
       width: 256px;
       height: 224px;
       padding: 12px;
       border: 5px solid #328CF0;
       background-color: #000000;
      margin: 0 100px 0 0;
       }
       
    #screens {
    flost: left;
       width: 256px;
       height: 224px;
       padding: 12px;
       border: 5px solid #328CF0;
       background-color: #000000;
      margin: 0 0 0 40px;
       }
    I made those changes with the wonderful FireFox CSS extension and they work great!

    To get slightly picky you shouldn't need that <br /> here:
    <div id="middlecolumn">
    <br />
    any spacing should be done from the H1 or #middlecolumn

    Have fun!

    - Nathaniel
    Knowledge is knowing that a tomatoe is a fruit; wisdom is not putting it in a fruit salad.

  3. #3
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Still doesn't work.

    Hi Mr_Than.

    Thanks for the relpy. That seems to have done the trick. However, I am still dogged by text showing up between both Divs in Mozilla. I don't know whether this is a browser specific problem or not, or whether this is due to Mozilla having far wider gaps between the two Divs than in IE. Does anyone know how to fix this problem?

    Also, how do I get around the padding and width problems between browsers which cause the page to look so different in each of the afore-mentioned browsers?

    http://www.gta-jutecity.pwp.blueyond...n%20Fight.html


    Thanks again Mr_Than.

    Stewarty-Boy.

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Yeppoon, Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah welcome to broken box models. When you specify a width IE (except IE 6 if you specify some meta thing I can't remember) misinterprets CSS1 and includes padding, borders and margins in the total width you specify. Standards compliant browsers (Firefox, etc) correctly ADD the margins, padding and borders to give a greater overall width.

    More info here: http://tantek.com/CSS/Examples/boxmodelhack.html

    Anyway, there are a couple of fixes you can do:

    1. add a block level (possibly with clear: both set too) element under the two divs to force everything to go underneath. <br style="clear: both" /> should work. For a nicer workaround see this: http://www.complexspiral.com/publica...aining-floats/

    2. To force all spacing to be the same you can wrap the two screenshot divs in another div which speicies a width and has margin-left and margin-right set to auto which will cause it to appear in the cetnre of your column. I use this method in a site and it works great as the spacing is consistent across browers.

    OK, that should give you something to go with.
    Knowledge is knowing that a tomatoe is a fruit; wisdom is not putting it in a fruit salad.

  5. #5
    SitePoint Enthusiast Stewarty-Boy's Avatar
    Join Date
    Dec 2003
    Location
    Dundee, Scotland.
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks.

    Hi Again Mr_Than.

    Thanks for your help. I managed to get rid of the text between my Divs in Mozilla by housing both Divs in another containment Div. That's that fixed. However, as far as the different gaps between the Divs when viewed in different browsers go, it's not too bad. I'll live with it I guess.


    Thanks again for your help. It is much appreciated.

    Stewarty-Boy.


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
  •