Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stack two divs together?

Tags:

html

css

I've looked everywhere and followed everyones instructions and it's not working ;__;

#aside
{
    float:left;
    width:200px;
    background-color:#39A861;
}

#section
{
    width:800px;
    float:left;
}

first they were a section and aside tags but I changed them to divs to ease the process but NOPE the same results. the second div is not right next to the first one, it like breaks a line this is just driving me nuts my container where these two divs will be:

#container1
{
    margin:0 auto;
    width:1000px;
}

here's the html

<div id="container1">  
    <div id="aside">
        <h2>stuff</h2>
    </div>
    <div id="section">
        <h1>stuff</h1>
    </div>
</div>
like image 619
KingHarambe Avatar asked Mar 28 '26 18:03

KingHarambe


1 Answers

There are so may ways to do like this.

<div class="container">
  <div class="aside"><h1>Title</h1></div>
  <div class="section">Stuff</div>
</div>

option 1

.container {
  width:1000px;
}

.aside{
  width:200px;
  float:left;
}

.section {
  margin-left:200px;
}

option 2

.container {
  width:1000px;
}

.container:before, .container:after{
  display:table;
  content:"";
}

.container:after{
  clear:both;
}

.aside{
  width:200px;
  float:left;
}

.section {
  float:left;
  width:800px;
}
like image 121
Jeyarathnem Jeyachanthuru Avatar answered Apr 01 '26 09:04

Jeyarathnem Jeyachanthuru



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!