How to place a div box next to another centered div?

Brackson

Brackson

卍卍卍卍卍卍卍卍卍卍卍
Jun 20, 2013
262
46
I am trying to add a left and right box to centered container. Here's pretty much what I'm doing. Useless code has been removed (border, lorem ipsum, etc).
HTML: 
<body>
    <div id="leftbox">
        <p>Lorem ipsum....</p>
    </div>
       
    <div id="rightbox">
        <p>Lorem ipsum....</p>
    </div>
   
    <div id="container">
        <div id="header">
            <img src="images/logo.png">
        </div>
   
        <div id="navigation">
            <ul>
                <li><a href="/" class="selected">Home</a></li>
                <li><a href="/about.html">About</a></li>
                <li><a href="/contact.html">Contact Me</a></li>
                <li><a href="/portfolio.html">Portfolio</a></li>
                <li>&nbsp;</li>
            </ul>
        </div>
       
        <div id="content">
            <h1>Hello!</h1>
            <p>Lorem ipsum....</p>
        </div>
</div>

Here's my CSS.
Code: 
#container {
    width:750px;
    margin: auto;
    border:1px solid black;
}

#leftbox {
    float:left;
    width:200px;
    margin-right:10px;
    padding:10px;
}

#rightbox {
    float:right;
    width:200px;
    margin-left:10px;
    padding:10px;
}

Here's what I'm getting when I run this:
You must be registered for see links
 
Sort by date Sort by votes
Brackson

Brackson

卍卍卍卍卍卍卍卍卍卍卍
Jun 20, 2013
262
46
Mega said:
@Brackson, why not you just apologize to @Queef and settle this. I can't believe you can fight with just a sentence that you found rude. You should be grateful that Queef still post something that can help you.
Click to expand...
I'm not the one that needs to apologize. Didn't mother teach you not to suggest things that you have no business suggesting?
 
Upvote 0 Downvote
Queef

Queef

Some people...
Jul 27, 2012
645
289
Brackson said:
I'm not the one that needs to apologize. Didn't mother teach you not to suggest things that you have no business suggesting?
Click to expand...

Nope, my mother tought me to respect everyone and if they help you, a little appreciation goes a long way.

Curious to know if my method works by the way.
 
Upvote 0 Downvote
Brackson

Brackson

卍卍卍卍卍卍卍卍卍卍卍
Jun 20, 2013
262
46
Quackster said:
Does Josh's method work?
Click to expand...
By reading what he suggested to do, I edited it myself, and it's working now.

Here's the updated code.
Code: 
#boxcontainer{
    width:1215px;
    margin:0 auto;
}

#leftbox {
    float:left;
    width:200px;
    background-color:white;
    border:1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow:hidden;
    box-shadow: 1px 1px 2px #888888;
    padding:10px;
}

#rightbox {
    float:right;
    width:200px;
    background-color:white;
    border:1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow:hidden;
    box-shadow: 1px 1px 2px #888888;
    padding:10px;
}

HTML: 
    <div id="boxcontainer">
        <div id="leftbox">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tincidunt purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mattis metus. Vestibulum pellentesque dapibus accumsan. Aliquam pharetra ultrices dolor, sed tincidunt urna facilisis ut. Morbi nec risus egestas, luctus sapien eget, facilisis elit. Aliquam malesuada tristique quam, in venenatis tellus dignissim in. Aliquam metus quam, eleifend sit amet euismod eget, tincidunt fermentum massa. Nunc auctor lobortis justo quis pharetra. Fusce tincidunt pellentesque sapien. Cras sem tellus, ultrices a sem a, molestie aliquet metus.</p>
        </div>

        <div id="rightbox">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at tincidunt purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mattis metus. Vestibulum pellentesque dapibus accumsan. Aliquam pharetra ultrices dolor, sed tincidunt urna facilisis ut. Morbi nec risus egestas, luctus sapien eget, facilisis elit. Aliquam malesuada tristique quam, in venenatis tellus dignissim in. Aliquam metus quam, eleifend sit amet euismod eget, tincidunt fermentum massa. Nunc auctor lobortis justo quis pharetra. Fusce tincidunt pellentesque sapien. Cras sem tellus, ultrices a sem a, molestie aliquet metus.</p>
        </div>
    </div>

And a screenshot:
You must be registered for see links
.
 
Upvote 0 Downvote
IntactDev

IntactDev

Member
Nov 22, 2012
399
71
Queef said:
By the way,

You don't need 2 separate div id's for both the boxes, having a #leftbox and #rightbox is pointless, just use one and give it a float:left;
Click to expand...
or set a class called "right", and then just add "right" to the HTML class names. Example:
Code: 
.right {
    float: right;
}

Code: 
<div class="box right">
    I'm floating right!
</div>
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 3 (members: 0, guests: 3)
☀️  Switch to Light Theme

Latest posts

Top