Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    May 2011
    Posts
    1
    Member #
    27957
    I'm having some trouble having divs sit side-by-side.

    Here's a quick explanation of what I've got before any code:

    I have a wrapper div that exists to define the overall background of the entire site

    'window' a div that shows a background image that's 300px tall,
    - 'logo' a div for showing the logo
    - 'buttons' a div for showing the navbar for the side

    'main-bg' a div that shows the background of the main area of the site and defines the body of the site's area
    - 'main' a div that shows a 300px tall background overtop and leading into the background of main-bg. This div is inside of the main-bg div.
    - 'main-body' a div containing text. This div is inside of the main div, which is inside of the main-bg div. This div I would like to have sit on the left side within the main-bg div
    - 'main-right' a div containing text currently. This div is inside of the main div, which is inside of the main-bg div. I'd like to have this div sitting beside the main-body div, but fooling around with floating this and/or main-body hasn't been successful. Floating either this or the main-body div doesn't place this div beside the main-body div, and floating both of them makes the backgrounds from the main and main-bg divs not show up.

    I've attached what the main-bg and how all of the internal divs (and yes I know that the backgrounds don't match up perfectly)

    Here's the relevant code:

    //HTML File:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Joe Easton</title>
    <link href="../main.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    </style>
    </head>

    <body>
    <div id="wrapper">

    <div id="window">
    <div id="logo">
    </div>
    <div id="button">
    <table id="Table_01" width="1000" height="50" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <img src="../images/menu_01.png" width="150" height="50" alt=""></td>
    <td>
    <img src="../images/menu_02.png" width="152" height="50" alt=""></td>
    <td>
    <img src="../images/menu_03.png" width="138" height="50" alt=""></td>
    <td>
    <img src="../images/menu_04.png" width="176" height="50" alt=""></td>
    <td>
    <img src="../images/menu_05.png" width="179" height="50" alt=""></td>
    <td>
    <img src="../images/menu_06.png" width="203" height="50" alt=""></td>
    <td>
    <img src="../images/menu_07.png" width="2" height="50" alt=""></td>
    </tr>
    </table>
    </div>

    // RELEVANT TAGS START HERE
    <div id="main-bg">
    <div id="main">

    <div id="main-body">


    <p>Welcome to the official homepage of Joe Easton. Here you will find a
    wide array of very cool things. This block of text is here as a placeholder, simply to give enough room to this block so that the background pattern can fully be displayed as it was meant to be.</p>
    <p>See? another paragarph!</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Welcome to the official homepage of Joe Easton. Here you will find a
    wide array of very cool things. This block of text is here as a placeholder, simply to give enough room to this block so that the background pattern can fully be displayed as it was meant to be.</p>
    <p>See? another paragarph!</p>
    <p>Welcome to the official homepage of Joe Easton. Here you will find a
    wide array of very cool things. This block of text is here as a placeholder, simply to give enough room to this block so that the background pattern can fully be displayed as it was meant to be.</p>
    <p>See? another paragarph!</p>
    <p>Welcome to the official homepage of Joe Easton. Here you will find a
    wide array of very cool things. This block of text is here as a placeholder, simply to give enough room to this block so that the background pattern can fully be displayed as it was meant to be.</p>
    <p>See? another paragarph!</p>

    </div>

    <div id="main-right">Here's where the stuff ont he right side of this window should go
    oh</div>


    </div>
    </div>
    </div>
    </div>
    </body>
    </html>


    // And the css file:

    #wrapper {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    z-index: 0;
    background-image: url(Images/bg-bar.png);
    height: 100%;
    float: left;
    }

    #window {
    margin-left: auto;
    margin-right: auto;
    background-image: url(Images/bg-top.png);
    background-repeat: repeat-x;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%;
    z-index: 1;
    }

    #logo {
    width:800px;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    background-image: url(file:///C|/Projects/Joe%20Easton/Images/title.png);
    }
    #button {
    width: 1000px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: 50px;
    z-index: 1;
    }

    // RELEVANT TAGS START HERE!!!!!!!!

    #main-bg {
    width:800px;
    height:auto;
    background-image: url(file:///C|/Projects/Joe%20Easton/Images/bg-bottom.png);
    background-repeat: repeat;
    margin-right: auto;
    margin-left: auto;
    }

    #main {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    background-image: url(file:///C|/Projects/Joe%20Easton/Images/bg-main.png);
    background-repeat: repeat-x;
    text-align: left;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #838383;
    border-left-color: #838383;
    }
    #main-body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    letter-spacing: normal;
    text-align: justify;
    word-spacing: normal;
    padding-top: 20px;
    padding-right: 5px;
    padding-bottom: 20px;
    padding-left: 5px;
    width: 500px;
    border: thick ridge #F00;
    margin-right: auto;
    float: left;
    margin-left: auto;
    }
    #main-right {
    width: 200px;
    border: medium dashed #090;
    margin-left: auto;
    margin-right: auto;
    float: left;
    }
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Works fine for me in IE and Chrome and Firefox....

    I'd float the right side box to the right...

    You know if you're going to set your margins and padding to 0 all the way around, you only have to define it as margin:0; padding:0;.... you don't have to define each side 0 ...

    What browser are you seeing this in ? I don't have safari on my play laptop ???

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    For starters, your code is a mess, which is why you're having a hard time troubleshooting it. It is more complex than it needs to be, and you have too many containers.
    Now, to answer your question, remember that borders, padding and margins all affect the width of your elements. In the code you posted, #main-right is 200px wide, but when I measure it in the image, it's 300px wide. Not sure why it's different. #main-body is 500px wide, but between borders and padding, it's making it 520px wide, so #main-right doesn't have any room and drops down a line. However you choose to go about it, you'll need to do something about the extra 20px.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Webzarus, post: 206859
    Works fine for me in IE and Chrome and Firefox....

    I'd float the right side box to the right...

    You know if you're going to set your margins and padding to 0 all the way around, you only have to define it as margin:0; padding:0;.... you don't have to define each side 0 ...

    What browser are you seeing this in ? I don't have safari on my play laptop ???
    The code he posted seems a little different than what was used in the image. I was doing the same head scratch on that one.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com