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:
Can I see the code for the latest?
Click to expand...

Code: 
#container {
    width:750px;
    margin:0 auto;
    display:inline;
    border:1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow:hidden;
    box-shadow: 1px 1px 2px #888888;
    background-color:white;
}

#leftbox {
    float:left;
    display:inline;
    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;
    display:inline;
    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;
}
 
Upvote 0 Downvote
M

Mega

Posting Freak
Mar 23, 2013
858
155
Brackson said:
Code: 
#container {
    width:750px;
    margin:0 auto;
    display:inline;
    border:1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow:hidden;
    box-shadow: 1px 1px 2px #888888;
    background-color:white;
}

#leftbox {
    float:left;
    display:inline;
    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;
    display:inline;
    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;
}
Click to expand...
Try this:
HTML
HTML: 
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="left">
    <div id="leftbox">
        <p>Lorem ipsum....</p>
    </div>
    </div>
   
    <div class="right">
    <div id="rightbox">
        <p>Lorem ipsum....</p>
    </div>
    </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>
CSS
Code: 
#container {
    width:750px;
    margin:0 auto;
    border:1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow:hidden;
    box-shadow: 1px 1px 2px #888888;
    background-color:white;
}

.left {
    float:left;
    margin-left: 65px;
}

.right {
    float:right;
    margin-right: 65px;
}

#leftbox {
    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 {
    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;
}
 
Upvote 0 Downvote
Brackson

Brackson

卍卍卍卍卍卍卍卍卍卍卍
Jun 20, 2013
262
46
Mega said:
Try this:
HTML
HTML: 
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="left">
    <div id="leftbox">
        <p>Lorem ipsum....</p>
    </div>
    </div>
  
    <div class="right">
    <div id="rightbox">
        <p>Lorem ipsum....</p>
    </div>
    </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>
CSS
Code: 
#container {
    width:750px;
    margin:0 auto;
    border:1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow:hidden;
    box-shadow: 1px 1px 2px #888888;
    background-color:white;
}

.left {
    float:left;
    margin-left: 65px;
}

.right {
    float:right;
    margin-right: 65px;
}

#leftbox {
    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 {
    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;
}
Click to expand...

This (to my knowledge) won't work for different sized screens.
Code: 
.left {
    float:left;
    margin-left: 65px;
}

.right {
    float:right;
    margin-right: 65px;
}
 
Upvote 0 Downvote
Queef

Queef

Some people...
Jul 27, 2012
645
289
I swear I've showed people how to do this on here about 4 times.

Move your left and right content box codes below the main content box.

You need to create a container with a transparent background that has a set width, I'm assuming in this case its going to be 750px. Then Center that box and position the codes of the 2 content boxes inside the code for the container. Something like this,

Code: 
<div class="content-container">
      <div id="right-box">

      </div>
      <div id="left-box">

      </div>
</div>

Im not writing your css, its not rocket science.

(Give either the right or left box a left or right margin to separate the 2)
 
Upvote 0 Downvote
Brackson

Brackson

卍卍卍卍卍卍卍卍卍卍卍
Jun 20, 2013
262
46
Queef said:
I swear I've showed people how to do this on here about 4 times.

Move your left and right content box codes below the main content box.

You need to create a container with a transparent background that has a set width, I'm assuming in this case its going to be 750px. Then Center that box and position the codes of the 2 content boxes inside the code for the container. Something like this,

Code: 
<div class="content-container">
      <div id="right-box">

      </div>
      <div id="left-box">

      </div>
</div>

Im not writing your css, its not rocket science.

(Give either the right or left box a left or right margin to separate the 2)
Click to expand...
I would like to see 4 separate sources on where you've shown others how to do this on this forum. I didn't ask you to rewrite my CSS either. Your rude and condescending tone makes you seem childish and it's unnecessary.

However, thanks for responding. I'll try it out and see how it goes.
 
Upvote 0 Downvote
classily

classily

Find has a big cock
Jun 11, 2013
21
33
Queef said:
I swear I've showed people how to do this on here about 4 times.

Move your left and right content box codes below the main content box.

You need to create a container with a transparent background that has a set width, I'm assuming in this case its going to be 750px. Then Center that box and position the codes of the 2 content boxes inside the code for the container. Something like this,

Code: 
<div class="content-container">
      <div id="right-box">

      </div>
      <div id="left-box">

      </div>
</div>

Im not writing your css, its not rocket science.

(Give either the right or left box a left or right margin to separate the 2)
Click to expand...
This looks perfect :D
Nice job btw!
 
Upvote 0 Downvote
Queef

Queef

Some people...
Jul 27, 2012
645
289
Brackson said:
I would like to see 4 separate sources on where you've shown others how to do this on this forum. I didn't ask you to rewrite my CSS either. Your rude and condescending tone makes you seem childish and it's unnecessary.

However, thanks for responding. I'll try it out and see how it goes.
Click to expand...

How did i sound rude and condescending when you can't hear me? Not one of the words i used was either rude nor condescending.

I just helped you, i even wrote code for you. Appreciate it, don't be an ass about it just because you have some little childish grudge against me.

I always come across like that when i help kids out like yourself because you never actually try to learn from peoples replies, you just want to be spoon fed the code. Even though you never actually directly asked for the code, its obvious by your previous replies at other peoples attempts, you just post a screenshot of what went wrong with their fix and expect them to sort it out. You never actually try to learn from other peoples mistakes.

Also if you truly wanted to learn how to do this rather than be spoon fed you would of realized that a very, very simple Google search will tell you how to do what your trying to do.

In future, don't be a little shit to someone that's trying to help you out, even if you think they are coming across rudely (Even though i wasn't) just because you have a grudge against them from future threads, its just downright rude.
 
Upvote 0 Downvote
Brackson

Brackson

卍卍卍卍卍卍卍卍卍卍卍
Jun 20, 2013
262
46
Queef said:
How did i sound rude and condescending when you can't hear me? Not one of the words i used was either rude nor condescending.

I just helped you, i even wrote code for you. Appreciate it, don't be an ass about it just because you have some little childish grudge against me.

I always come across like that when i help kids out like yourself because you never actually try to learn from peoples replies, you just want to be spoon fed the code. Even though you never actually directly asked for the code, its obvious by your previous replies at other peoples attempts, you just post a screenshot of what went wrong with their fix and expect them to sort it out. You never actually try to learn from other peoples mistakes.

Also if you truly wanted to learn how to do this rather than be spoon fed you would of realized by a very, very simple Google search will tell you how to do what your trying to do.

In future, don't be a little shit to someone that's trying to help you out, even if you think they are coming across rudely (Even though i wasn't) just because you have a grudge against them from future threads, its just downright rude.
Click to expand...
That whole post is backwards.
  1. I'm not a kid.
  2. I have no grudge against you.
  3. I don't want to be spoon-fed.
  4. I posted a screenshot because I wanted them to see what happens when I try to run the code that I have/they've given me (how else would they know?).
  5. I've searched the internet but I haven't found anything that worked, and posting here is beneficial for the forums, the forum community, and myself.
  6. I'm not being a "little shit". If anyone is, it's you.
  7. You didn't "write code for me". All you did was include an example of how I should lay out my div's (which I did not need by the way).
How did i sound rude and condescending when you can't hear me? Not one of the words i used was either rude nor condescending.
Click to expand...
That first statement didn't make any sense. I don't think you understand the definition of 'tone'. Anyways, "I swear I've showed people how to do this on here about 4 times." and "Im not writing your css, its not rocket science." appeared to me as rude, and 90% of what you just said was both rude and condescending.

I am not remotely mad at you, nor do I hold a grudge. If anyone does, it's you.
 
Upvote 0 Downvote
Magic

Magic

Posting Freak
Oct 11, 2012
1,026
196
Are you fucking kidding me? He just wrote you your CSS and fixed your problem and you pick out the tiniest thing that seems rude to you and you turn it around into an argument. Un-fucking-believable.
 
Upvote 0 Downvote
classily

classily

Find has a big cock
Jun 11, 2013
21
33
Brackson said:
That whole post is backwards.
  1. I'm not a kid.
  2. I have no grudge against you.
  3. I don't want to be spoon-fed.
  4. I posted a screenshot because I wanted them to see what happens when I try to run the code that I have/they've given me (how else would they know?).
  5. I've searched the internet but I haven't found anything that worked, and posting here is beneficial for the forums, the forum community, and myself.
  6. I'm not being a "little shit". If anyone is, it's you.
  7. You didn't "write code for me". All you did was include an example of how I should lay out my div's (which I did not need by the way).

That first statement didn't make any sense. I don't think you understand the definition of 'tone'. Anyways, "I swear I've showed people how to do this on here about 4 times." and "Im not writing your css, its not rocket science." appeared to me as rude, and 90% of what you just said was both rude and condescending.

I am not remotely mad at you, nor do I hold a grudge. If anyone does, it's you.
Click to expand...
Dude you look like an ass
He has some valid points lol....

He wasn't really being rude tbh either
I think you're overly sensitive and you should probably shut up ze fuck up lol
he gave you the CSS so
 
Upvote 0 Downvote
Brackson

Brackson

卍卍卍卍卍卍卍卍卍卍卍
Jun 20, 2013
262
46
Magic said:
Are you fucking kidding me? He just wrote you your CSS and fixed your problem and you pick out the tiniest thing that seems rude to you and you turn it around into an argument. Un-fucking-believable.
Click to expand...
He did not write anything for me, he only told me how to fix my problem. He was being rude, and I was defending myself. I didn't turn what he said into an argument, he did.

classily said:
Dude you look like an ass
He has some valid point lol....

He wasn't really being rude tbh either
I think you're overly sensitive and you should probably shut up lol
he gave you the CSS so
Click to expand...
If you think I'm the one who looks like an ass and he wasn't being rude then you're an idiot. I'm not oversensitive, and he did not 'give' me the CSS. He only told me how to fix my problem..
 
Upvote 0 Downvote
Magic

Magic

Posting Freak
Oct 11, 2012
1,026
196
Brackson said:
He did not write anything for me, he only told me how to fix my problem. He was being rude, and I was defending myself. I didn't turn what he said into an argument, he did.


If you think I'm the one who looks like an ass and he wasn't being rude then you're an idiot. I'm not oversensitive, and he didn't give me anything.
Click to expand...
The stupidity is strong in this one
 
Upvote 0 Downvote
classily

classily

Find has a big cock
Jun 11, 2013
21
33
Brackson said:
He did not write anything for me, he only told me how to fix my problem. He was being rude, and I was defending myself. I didn't turn what he said into an argument, he did.


If you think I'm the one who looks like an ass and he wasn't being rude then you're an idiot. I'm not oversensitive, and he didn't give me anything.
Click to expand...

He gave you something sir, work with it.
Kids these days , expect to be spoon fed everything.
 
Upvote 0 Downvote

Users who are viewing this thread

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

Latest posts

Top