Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertical Alignment of box divs

    Hey, i'm trying to get three divs vertically aligned with each other properly.

    Here is the div css styling:
    Code:
    #left-box
    {
    	float:left;
    	border:1px solid green;
    	width:300px;
    }
    
    #middle-box
    {
    	text-align:left;
    	border:1px solid green;
    	margin-left:380px;
    	width:500px;
    }
    
    #right-box
    {
    	border:1px solid green;
    	width:300px;
    	position:relative;
    	top:-82px;
    	left:940px;
    
    	top:-110px\9;
    }
    The problem happens with #right-box. When I use #left-box and #middle-box in my HTML, they both are vertically aligned. But when I use #right-box, it appears under the #left-box and #middle-box. I can solve this problem using position:relative and top, but that requires me to use css hacks for IE. Is there a cleaner and more proper way of doing this?

    Thanks for your help everyone!

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    145
    Thanks
    0
    Thanked 27 Times in 27 Posts
    Now i don't know if this will help but using span may help, i haven't checked this out in ie (idea came from http://stackoverflow.com/questions/2...splay-inline):

    Code:
    <html>
    <head>
    <style type="text/css">
    #left-box
    {
    	float:left;
    	border:1px solid green;
    	width:300px;
    }
    
    #middle-box
    {
    	float:left;
    	border:1px solid green;
    	width:300px;
    	margin-left:10px;
    }
    
    #right-box
    {
    	float:left;
    	border:1px solid green;
    	width:300px;
    	margin-left:10px;
    }
    </style>
    </head>
    <body>
    
    <span id="left-box">hi there</span>
    <span id="middle-box">hi there</span>
    <span id="right-box">hi there</span>
    
    </body>
    </html>
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello wonopon,
    Have a look at 3 boxes here. Sorry for the aweful colors.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Quote Originally Posted by wonopon View Post
    But when I use #right-box, it appears under the #left-box and #middle-box.
    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    wonopon (11-15-2012)

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys so much for the help, it's just what I needed


  •  

    Tags for this Thread

    Posting Permissions

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