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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    18
    Member #
    26792
    TheGAME1264 said I should stop using tables to align my content. I use divs as much as I can but when it comes to a scenario like this I am stuck.

    Here is my code:

    Code:
      <div id="boxes">
        <div id="left_box"></div>
        <div id="middle_box"></div>
        <div id="right_box"></div>
      </div>
    Code:
    #wrapper #boxes {
    	padding-left: 60px;
    	padding-right: 60px;
    	width: 830px;
    	height: 220px;
    }
    
    #wrapper #boxes #left_box {
    	background-image: url(../images/box.png);
    	height: 220px;
    	width: 270px;
    	float: left;
    }
    #wrapper #boxes #middle_box {
    	background-image: url(../images/box.png);
    	height: 220px;
    	width: 270px;
    	float: right;
    	margin-right: 10px;
    }
    #wrapper #boxes #right_box {
    	background-image: url(../images/box.png);
    	height: 220px;
    	width: 270px;
    	float: right;
    }
    What I am trying to achieve is to have 3 boxes/divs next to each other with a 10px space between them.

    How can I achieve this.

    If you need me to I will upload this page to my server so that you can see it better.

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    HTML Code:
      <div id="boxes">
        <div id="left_box" class="column"></div>
        <div id="middle_box" class="column"></div>
        <div id="right_box" class="column"></div>
      </div>
    
    
    
    #boxes {
    	padding-left: 60px;
    	padding-right: 60px;
    	width: 830px;
    	height: 220px;
            overflow: auto;
    }
    
    #left_box {
    	background-image: url(../images/box.png);
    	height: 220px;
    	width: 270px;
    }
    #middle_box {
    	background-image: url(../images/box.png);
    	height: 220px;
    	width: 270px;
    	margin-right: 10px;
    }
    #right_box {
    	background-image: url(../images/box.png);
    	height: 220px;
    	width: 270px;
    }
    
    .column {
           display: inline-block; 
           float: left;
    }

    while($get_it !== true){ continue; }

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    See Dorky's answer, with one slight adjustment:
    Code:
    #left_box {
    	background-image: url(../images/box.png);
    	height: 220px;
    	width: 270px;
                 margin-right:  10px; /* You'll need this to get your right margin.
    }
    There's another trick you can use with negative margins to put your content first, but I'm creating the template for it now, so you'll have to wait a few hours.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Okay, I lied about the "few hours".

    Vertical Menu Template

    Keep in mind that this was done as a sample only and as quickly as possible. So for those of you who notice that I used a JPG for a faux background when I should have used a GIF, I know, but it's not relevant for the bigger purpose I was trying to accomplish.

    Same thing with the Cufon font spacing (by the way, it's a good Cufon example) and the Spanglish. I only know a little Spanish.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Feb 2011
    Posts
    18
    Member #
    26792
    Thanks for the examples. These will come in handy. I actually figure a way to make it work. I just used padding instead of margin on the boxes.

    Either way I think this site is turning out good.

    Asphaltinc.com

    Currently their old site is up there but I will post the new site in few minutes in case anyone wants to look at it..

    It is still under construction so I am aware that all the links do not work yet.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Put it in a subfolder, then. That way, the client doesn't lose business as a result of dead links.

    EDIT: Apparently I said that too late. Whoops.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    By the way, I don't know if you're doing something, but your site seems really laggy right now.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  9. #8
    Junior Member
    Join Date
    Feb 2011
    Posts
    18
    Member #
    26792
    Hmm Im not sure why it seems laggy.. This is the company I work for so no big deal on the site being down for a day or too..

    Otherwise I wouldnt of done that lol..

    Is it still Laggy?

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Yeah, it's still laggy. I'm able to post here while I'm waiting for your site to respond.

    The ping test is a little weird. No packet loss, but some somewhat high response times:
    Pinging asphaltinc.com [209.236.224.204] with 32 bytes of data:



    Reply from 209.236.224.204: bytes=32 time=36ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=49ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=63ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=45ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=53ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=74ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=51ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=68ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=45ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=67ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=55ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=99ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=98ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=57ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=118ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=101ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=67ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=74ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=110ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=63ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=41ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=119ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=77ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=61ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=107ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=104ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=64ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=75ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=92ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=75ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=43ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=125ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=89ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=46ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=122ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=97ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=58ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=85ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=41ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=88ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=57ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=129ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=108ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=60ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=93ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=115ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=65ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=72ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=111ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=76ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=39ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=126ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=92ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=39ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=135ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=98ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=98ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=57ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=89ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=94ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=81ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=96ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=79ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=124ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=74ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=245ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=117ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=210ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=210ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=29ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=337ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=125ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=340ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=316ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=43ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=78ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=44ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=60ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=66ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=37ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=68ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=57ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=36ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=74ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=75ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=28ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=55ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=86ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=109ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=108ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=71ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=49ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=120ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=395ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=127ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=288ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=89ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=118ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=76ms TTL=53

    Reply from 209.236.224.204: bytes=32 time=53ms TTL=53



    Ping statistics for 209.236.224.204:

    Packets: Sent = 100, Received = 100, Lost = 0 (0% loss),

    Approximate round trip times in milli-seconds:

    Minimum = 28ms, Maximum = 395ms, Average = 95ms
    This isn't really my game by nature, though, so I don't know if this is on my end.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Junior Member
    Join Date
    Feb 2011
    Posts
    18
    Member #
    26792
    Very weird, I check on 3 dif computers same internet and it was almost instant..

    I will look into it more when I get home.

    Thanks for the heads up though!


Page 1 of 2 1 2 LastLast

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
  •  

Search tags for this page

align three divs next to each other

Click on a term to search for related topics.
All times are GMT -6. The time now is 01:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com