www.webdeveloper.com
Results 1 to 12 of 12

Thread: 2 div boxes side by side?

  1. #1
    Join Date
    Apr 2007
    Posts
    1

    2 div boxes side by side?

    Hy, I'm really new to html and, well, computers in general. I have began making my first real site, and I have run into a problem. I have two div boxes that I want to go beside each other. Heres the layout I am trying to obtain
    {box1} {box2}Header{/box2} {/box1}

    {box3} {box4}
    _ _ _ _
    _ _ _ _
    etc etc
    {/box3} {/box4}


    I keep on getting box4 under box three, instead of beside it like I want.
    You can see the site here.

    here is my head
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    body{
         background-color: #383838
     }
    /* set millions of background images */
    .rbroundbox { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=nt&co=C4C4C4.gif) repeat; }
    .rbtop div { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=tl&co=383838&ci=C4C4C4.gif) no-repeat top left; }
    .rbtop { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=tr&co=383838&ci=C4C4C4.gif) no-repeat top right; }
    .rbbot div { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=bl&co=383838&ci=C4C4C4.gif) no-repeat bottom left; }
    .rbbot { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=br&co=383838&ci=C4C4C4.gif) no-repeat bottom right; }
    
    /* height and width stuff, width not really nessisary. */
    .rbtop div, .rbtop, .rbbot div, .rbbot {
    width: 100%;
    height: 7px;
    font-size: 1px;
    }
    .rbcontent { margin: 0 7px; }
    .rbroundbox { width: 90%; margin: 1em auto; }
    #div_here { background-color: #C4C4C4; width: 75%; margin: 3em auto; text-align: center;  }
    </style>
    </head>
    Heres my body
    Code:
    <body>
    <div class="rbroundbox">
    	<div class="rbtop"><div></div></div>
    		<div class="rbcontent">
    			<div id="div_here"><div style="padding-right:50px; padding-left: 50px; padding-top: 20px; padding-bottom:20px; border-style:outset; border-width:medium; border-color: #EAEAEA; background-color: #848484">
    <div style="padding-right:75px; padding-left: 75px; padding-top:15px; padding-bottom:15px; margin-right:150px; margin-left: 150px; border-style:outset; border-width:medium; border-color:#EAEAEA; background-color:#444444">
    <h1>Tech World</h1></div>
    </div><pre>
    </pre><div style= "padding-left: 50px; padding-right: 100px; padding-top: 100px; padding-bottom: 75px; border-style: outset; border-width: medium; border-color: #EAEAEA; background-color: #848484; margin-right:450px"><pre>
    
    
    
    
    
    
    
    
    
    
    </pre>
    </div>
    <div style="padding-top:100px; padding-bottom:75px; padding-right:50px; padding-left:50px;border-style: outset; border-width: medium; border-color: #EAEAEA; background-color: #848484; width:19em; margin-left:250px">
    I want this to be ^ there.
    
    <pre>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </pre></div>
    </div>
    			
    		</div><!-- /rbcontent -->
    	<div class="rbbot"><div></div></div>
    </div><!-- /rbroundbox -->
    </body>
    Thanks in advance,


    Joe

  2. #2
    Join Date
    Oct 2006
    Posts
    392
    Not sure how you want it to display try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    body{
         background-color: #383838
     }
    /* set millions of background images */
    .rbroundbox { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=nt&co=C4C4C4.gif) repeat; }
    .rbtop div { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=tl&co=383838&ci=C4C4C4.gif) no-repeat top left; }
    .rbtop { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=tr&co=383838&ci=C4C4C4.gif) no-repeat top right; }
    .rbbot div { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=bl&co=383838&ci=C4C4C4.gif) no-repeat bottom left; }
    .rbbot { background: url(http://www.neuroticweb.com/recursos/css-rounded-box/rounded.php?cn=br&co=383838&ci=C4C4C4.gif) no-repeat bottom right; }
    
    /* height and width stuff, width not really nessisary. */
    .rbtop div, .rbtop, .rbbot div, .rbbot {
    width: 100%;
    height: 7px;
    font-size: 1px;
    }
    .rbcontent { margin: 0 7px; }
    .rbroundbox { width: 90%; margin: 1em auto; }
    #div_here { background-color: #C4C4C4; width: 75%; margin: 3em auto; text-align: center;  }
    </style>
    </head>
    <body>
    <div class="rbtop">
      <div></div>
    </div>
    		<div style="padding-right:50px; padding-left: 50px; padding-top: 20px; padding-bottom:20px; border-style:outset; border-width:medium; border-color: #EAEAEA; background-color: #848484"> 
      <div style="padding-right:75px; padding-left: 75px; padding-top:15px; padding-bottom:15px; margin-right:150px; margin-left: 150px; border-style:outset; border-width:medium; border-color:#EAEAEA; background-color:#444444">
        <div style= "padding-left: 50px; padding-right: 100px; padding-top: 100px; padding-bottom: 75px; border-style: outset; border-width: medium; border-color: #EAEAEA; background-color: #848484; margin-right:450px"><pre>
    	  <h1>Tech World</h1>
        </div>
      </div>
    </div>
    You should try tables if you ask me.

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Please stay away from tables and use <div>s and CSS2. The web is movin' on.

    Ron

  4. #4
    Join Date
    Jul 2006
    Posts
    62
    You can set float's on DIV's, I've used that a few times.

    Quote Originally Posted by Major Payne
    CSS2
    Do you just mean CSS? :?

  5. #5
    Join Date
    Sep 2006
    Location
    Kentucky
    Posts
    56
    Code:
        <div style="width: 200px;">
            <div style="float: left; background: #FF0000; width: 100px;">
                Left Side</div>
            <div style="float: right; background: #00FF00; width: 100px;">
                Right Side</div>
            <div style="clear: both;">
            </div>
        </div>
    Background color is used to show the boxes.
    The clear:both is used to clear the float so that any other divs that follow perform their normal div routine
    Border and other styles can be added to the styles also.

    Microsoft Certified Professional (MCP), future Microsoft Certified Database Administrator (MCDBA) - May 2007

    Programmer of ASP.NET 1.1/2.0, HTML, Classic ASP, CSS, SQL, JavaScript, VB, AJAX, XML.
    User of Photoshop, Illustrator, Visual Studios, SQL Enterprise Manager

    Sites: www.uscav.com, www.uscavonpoint.com

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Do you just mean CSS? :?
    "CSS2" is what we are using now. The vernacular useage is just "CSS". It is the version number, like HTML3.1, HTML4 (<-- what we use now), etc.)
    There are CSS3 selectors being developed (like the ability to use IMAGES for BORDERS on elements, etc), but don't count on seeing support for CSS3 for at least another 10-years. IE barely supports CSS2 and until all browsers can handle it, it probably will not be released for at least a decade.
    I build for: Firefox and tweak for IE

  7. #7
    Join Date
    Jul 2006
    Posts
    62
    Aaaahhhh right. Good-oh then.

  8. #8
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    Quote Originally Posted by Demon
    You can set float's on DIV's, I've used that a few times.
    Do you just mean CSS? :?
    There's CSS, CSS2 and now CSS3 is out. Take your pick. It all should work to some extent. WebJoel's explanation is best.

    Ron

  9. #9
    Join Date
    Jul 2006
    Posts
    62
    Will CSS stop working at some point then?

  10. #10
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,216
    You'll be good to go with the CSS current browsers support for some time. As WebJoel said, it'll be some time before CSS2 and CSS3 get implemented fully in all browsers. Check out W3C's CSS page. This is their CSS2 Page.

    Ron

  11. #11
    Join Date
    Jul 2007
    Posts
    2
    Although, it seems 4 year old post. Still, Thanks buddy, It helped

    Quote Originally Posted by drallab View Post
    Code:
        <div style="width: 200px;">
            <div style="float: left; background: #FF0000; width: 100px;">
                Left Side</div>
            <div style="float: right; background: #00FF00; width: 100px;">
                Right Side</div>
            <div style="clear: both;">
            </div>
        </div>
    Background color is used to show the boxes.
    The clear:both is used to clear the float so that any other divs that follow perform their normal div routine
    Border and other styles can be added to the styles also.


  12. #12
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    You can accomplish div3 and div4's layout easily enough with a little CSS.
    Method 1) Use float: left; on div3; this is better than method 2
    Method 2) Set display: inline-block or similar for div3 and div4; this will allow the boxes to be side-by-side if you set widths that will allow it. Just make sure there is a static-width container encompassing them both so they don't wrap.

    P.S.: Not to burst anyone's bubbles, but most of the web uses HTML4.01 and CSS2. It is supposedly moving toward HTML5 and CSS3.
    Computer programmer / web developer.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles