CSS Styling - How to Put These Two Div Boxes Adjacent

CSS styling - how to put these two div boxes adjacent

You have two options (choose one or the other but not both).

• set float: left; on both #fact and #sortbar
• set display: inline-block; on both #fact and #sortbar

The second option is better because you don't have to fix the clearing and such, as well as the fact that inline-block works a lot better layout-wise than left floating.

How to place two divs next to each other?

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

CSS two divs next to each other

You can use flexbox to lay out your items:

#parent {

  display: flex;

}

#narrow {

  width: 200px;

  background: lightblue;

  /* Just so it's visible */

}

#wide {

  flex: 1;

  /* Grow to rest of container */

  background: lightgreen;

  /* Just so it's visible */

}

<div id="parent">

  <div id="wide">Wide (rest of width)</div>

  <div id="narrow">Narrow (200px)</div>

</div>

How to center two divs floating next to one another

You will have to automatically set the margin and probably a specific width to your wrapper div

<div id="wrapper"></div>

In your CSS:

#wrapper {
    width: 70%;
    margin: 0 auto;
}

Two Divs next to each other, that then stack with responsive change

You can use CSS3 media query for this. Write like this:

CSS

.wrapper { 
  border : 2px solid #000; 
  overflow:hidden;
}

.wrapper div {
   min-height: 200px;
   padding: 10px;
}
#one {
  background-color: gray;
  float:left; 
  margin-right:20px;
  width:140px;
  border-right:2px solid #000;
}
#two { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  border:2px dashed #ccc;
  min-height:170px;
}

@media screen and (max-width: 400px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

HTML

<div class="wrapper">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

Check this for more http://jsfiddle.net/cUCvY/1/

How align 2 adjacent divs horizontally WITHOUT float?

Use Position properties when your height and width are fixed

<div style="width:200px;height:100px;position:relative;background:#ccc;"> 

   <div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">

   </div> 

   <div style="background:red; position:absolute; left:50%; width:50%; height:100%;">

   </div>

</div>

How to make a gap between two DIV within the same column

Please pay attention to the comments after the 2 lines.

.box1 {
    display: block;
    padding: 10px;
    margin-bottom: 100px; /* SIMPLY SET THIS PROPERTY AS MUCH AS YOU WANT. This changes the space below box1 */
    text-align: justify;
}

.box2 {
    display: block;
    padding: 10px;
    text-align: justify;
    margin-top: 100px; /* OR ADD THIS LINE AND SET YOUR PROPER SPACE as the space above box2 */
}

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

CSS aligning boxes next to each other

Instead of using float:left, you can use: "display:inline-block", this will put the div next to each other. I'll also recommend you to put some padding on each side of the divs.

You can see your working code here, this is the most cleanest way I found:

.nextto{

  display: inline-block;

  width: 30%;

}

<div style="width:100%">

 <div class="nextto">Test</div>

 <div class="nextto">This is a longer test. This is a longer test. This is a longer test.</div>

 </div>

---

Related Topics