CODEWITHSUNDEEP
htmlcss
Dee
Dee

Reputation: 331

side by side divs inside a div

I'm trying to create 3 divs with the middle div having 2 divs inside side by side. The issue I'm having is that at screen size >768px the 2 divs inside are being squished rather than 100% width? Any help is greatly appreciated!

https://jsfiddle.net/z3q2wtLf/embedded/result/

The below code is an example of what I'm trying to achieve but there something I'm not catching in the fiddle above thats preventing the below result.

#panel1 {
    width:100%;
    height:100px;
    text-align:center;
    background: #000000;
}

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:50%;
    height: 20px;
    background: #ff0000;
}
#right {
    float:right;
    width:50%;
    height: 20px;
    background: #0000ff;
}
#panel2 {
    width:100%;
    height:100px;
    text-align:center;
    background: #000000;
}
<div id="panel1">
</div>
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

<div id="panel1">
</div>

Upvotes: 1

Views: 305

Answers (3)

Spencer D
Spencer D

Reputation: 3486

Give this a look: https://jsfiddle.net/z3q2wtLf/29/embedded/result/

I switched the media to:

@media only screen and (min-width: 768px) { 
    body { display: block; }
}

On the container CSS, I added: min-height: 460px !important; (The "important" notation may be unnecessary, but it worked and I didn't bother testing without it.)

Then in your actual HTML, I fixed a spelling error where you wrote "containter" instead of "container"

And, finally, I switched #panel1 to .panel1 and changed the top and bottom divs to <div class="panel1"></div> instead of <div id="panel1"></div>. In HTML, you are NEVER supposed to give two elements the same ID. Hence why I changed the ID to a class. (You can reuse classes as much as you want.)

Upvotes: 2

Trenton Tyler
Trenton Tyler

Reputation: 83

To go off of what QuestionMarks said

@media only screen and (min-width: 768px) { 
    body { display: flex; }
}

Instead of it using flex to display your divs, you need to use this one:

  @media only screen and (min-width: 768px) { 
        body { display: inline-block; }
    }

The key here is using display: inline-block; to display divs side by side.

Upvotes: 0

QuestionMarks
QuestionMarks

Reputation: 246

In your CSS, you have a line:

@media only screen and (min-width: 768px) { 
    body { display: flex; }
}

This is the cause of your issue.

Upvotes: 1

Related Questions