CODEWITHSUNDEEP
htmlcss
BobbyJones
BobbyJones

Reputation: 1364

Cannot get 2 divs side by side inside another div

I need your help,

How can I get the other (red) div to line-up nicely to the right beside the blue div inside of the main div. I have attached a pic of the problem below:

enter image description here

Here is the code:

* {
  margin: 0;
  padding: 0;
}
html {
  background: rgb(132, 132, 132);
}
.centerObject {
  width: 800px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  /* Half of Width */
  margin-top: -300px;
  /* Half of Height */
  background: rgb(212, 208, 200);
  border: 2px ridge rgb(75, 75, 75);
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="centerObject">
    <div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>
    <div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>
  </div>
</body>

</html>

Upvotes: 2

Views: 7755

Answers (6)

CaptainOfTheSky
CaptainOfTheSky

Reputation: 106

You need to add float: left; to a element's style as well. And lower the width by 1px to account for the border.

<div id="a" style="width: 200px; height: 100%; border: 1px solid blue; float: left;"></div>
<div id="b" style="width: 596px; height: 100%; border: 1px solid red; float: left;"></div>

Upvotes: 1

deadkff01
deadkff01

Reputation: 41

CSS: 

* {
    margin: 0;
    padding: 0;
}

    html {
        background: rgb(132,132,132);
    }
    .centerObject {
        width:800px;
        height:600px;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-400px; /* Half of Width */    
        margin-top:-300px; /* Half of Height */
        background: rgb(212,208,200);
        border: 2px ridge rgb(75,75,75);
    }

    .centerObject  div{
        float: left;
      }

HTML:

<div class="centerObject">

    <div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>

    <div id="b" style="width: 596px; height: 100%; border: 1px solid red;"></div>

</div>

Upvotes: 1

Edu Lomeli
Edu Lomeli

Reputation: 2282

You need to float both divs, and then in div#a you need to subtract the width of the border:

<div id="a" style="width: 198px; height: 100%; border: 1px solid blue; float:left;"></div>

<div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>

Upvotes: 2

Stickers
Stickers

Reputation: 78796

The quickset way to fix that is swapping the position of the two <div>

<div id="b">...</div>
<div id="a">...</div>

Upvotes: 2

Matthew
Matthew

Reputation: 932

try adding "float: left" to #a and "vertical-align: top" to #b. Also you may want to add a clearfix to the centerObject div. here you can read more about clearfix. ClearFix

Upvotes: 1

j08691
j08691

Reputation: 208032

You can add this CSS:

.centerObject div {
    box-sizing:border-box;
    display:inline-block;
}


* {
    margin: 0;
    padding: 0;
}
html {
    background: rgb(132, 132, 132);
}
.centerObject {
    width:800px;
    height:600px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-400px;
    /* Half of Width */
    margin-top:-300px;
    /* Half of Height */
    background: rgb(212, 208, 200);
    border: 2px ridge rgb(75, 75, 75);
}
.centerObject div {
    box-sizing:border-box;
    display:inline-block;
}
<div class="centerObject">
    <div id="a" style="width: 200px; height: 100%; border: 1px solid blue;"></div>
    <div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>
</div>

One issue is that your child divs are wider than their parent (counting their borders), so box-sizing:border-box; will fix that. Then by using display:inline-block; you can get them to appear side by side (they're block elements by default).

Upvotes: 4

Related Questions