I want the boxes to stretch accross the container. Ps: This has to be done using floats

user_14944618 0
Viewed 34

The boxes have to be of equal length in the first media queire. Two boxes have to be of equal length in the second media and the third third has to stretch all across. In the third media all have to stretch across the body. HTML and CSS:

    body{
        text-align: center;
        background-color: #E4F6F8;
        margin: 0px;
    }
    #obox{
        background-color: #D3D3D3;
        padding: 10px;
        margin: 20px;
        border: 1px solid black;
        width: 400px;
        height: 300px;
        float: left;
    }
    
    
    #ibox{
        border: 1px solid black;
        margin:0px;
        padding: 10px;
        float: right;
        font-size: 30px;
        font-family: Buffalo;
        font-style: bold;
        margin:0px 4px 50px 0px;
    
    
    }
    #hbox{
        border: solid black;
        padding: 10px;
        font-size: 30px;
        font-family: Times new roman;
        font-style: bold;
        margin:4px 4px 50px 4px;
    
    
    }
     .pink{
        background-color: #aa93b9;
     }
     .red{
        background-color: red;
     }
     .yellow{
        background-color: yellow;
     }
     div{
        clear: right;
        font-family: Watch;
        color: brown;
        font-size: 20px;
     }
     span{
        color: black;
     }
    @media (min-width: 992px){
        .box1 , .box2{
            width:33%;
        }
    }
    
    @media (min-width: 768px) and (max-width: 991px){
        .box1{
            width:50%;
        }
        .box2{
            width:100%;
        }
    }
    
    @media (min-width: 576px) and (max-width: 767px){
        box1 , .box2{
            width:100%;
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Assignment Solution for Module 2</title>
        <link rel="stylesheet" href="index.css"> 
    </head>
    <body>
    <h1 id="hbox">OUR MENU</h1>
    
        <div id="obox" class="box1">
            <span id="ibox" class="pink">Chicken Sandwich</span>
            <div>
            This Fried Chicken Sandwich is THE BEST! It really doesn’t get much better than crispy and juicy fried chicken on a toasted bun with a smoky paprika sauce. It’s easier than you think to make your own fried chicken at home and this recipe will ensure you have succulent chicken every time!
            </div>
    
        </div>
        <div id="obox" class="box1">
            <span id="ibox" class="red">Buffalo Chicken Wings</span>
            <div>
            Buffalo wings are a must for game day, and this fried chicken wings recipe is the BEST way to make them. Get super crispy wings in the most delicious buffalo sauce. They’re so easy to deep fry, and so fun to eat!
            </div>
    
    
        </div>
        <div id="obox" class="box2">
            <span id="ibox" class="yellow">BBQ Chicken Nachos</span>
            <div>
            These BBQ Chicken Nachos are the perfect appetizer for game day! Baked in the oven on a sheet pan, they are quick to make and perfect for serving a crowd.
             </div>
        </div>  
    
    </body>
    </html>

Ps: I can also not use flexbox or gridbox. Please also can you explain how you are getting the solution.

css html
2 Answers

Try following code:

body{
        text-align: center;
        background-color: #E4F6F8;
        margin: 0px;
    }
    .obox{
        background-color: #D3D3D3;
        padding: 10px;
        margin: 20px;
        border: 1px solid black;
        width: 400px;
        height: 300px;
        float: left;
        box-sizing: border-box;
    }
    
    
    .ibox{
        border: 1px solid black;
        margin:0px;
        padding: 10px;
        float: right;
        font-size: 30px;
        font-family: Buffalo;
        font-style: bold;
        margin:0px 4px 50px 0px;
        box-sizing: border-box;
    
    }
    .hbox{
        border: solid black;
        padding: 10px;
        font-size: 30px;
        font-family: Times new roman;
        font-style: bold;
        margin:4px 4px 50px 4px;
        box-sizing: border-box;
    
    }
     .pink{
        background-color: #aa93b9;
     }
     .red{
        background-color: red;
     }
     .yellow{
        background-color: yellow;
     }
     div{
        clear: right;
        font-family: Watch;
        color: brown;
        font-size: 20px;
        box-sizing: border-box;
     }
     span{
        color: black;
     }
    @media (min-width: 992px){
        .box1 , .box2{
            width:30%;
            box-sizing: border-box;
        }
    }
    
    @media (min-width: 768px) and (max-width: 991px){
        .box1{
            width:50%;
            box-sizing: border-box;
    
        }
        .box2{
            box-sizing: border-box;
            width:100%;
        }
    }
    
    @media (min-width: 576px) and (max-width: 767px){
        .box1 , .box2{
            width:100%;
            box-sizing: border-box;
    
        }
    }
            <!DOCTYPE html>
    <html>
    <head>
        <title>Assignment Solution for Module 2</title>
        <link rel="stylesheet" href="index.css">

    </head>
    <body>
    <h1 class="hbox">OUR MENU</h1>
    
        <div class="obox box1">
            <span class="ibox pink">Chicken Sandwich</span>
            <div>
            This Fried Chicken Sandwich is THE BEST! It really doesn’t get much better than crispy and juicy fried chicken on a toasted bun with a smoky paprika sauce. It’s easier than you think to make your own fried chicken at home and this recipe will ensure you have succulent chicken every time!
            </div>
    
        </div>
        <div class="obox box1">
            <span class="ibox red">Buffalo Chicken Wings</span>
            <div>
            Buffalo wings are a must for game day, and this fried chicken wings recipe is the BEST way to make them. Get super crispy wings in the most delicious buffalo sauce. They’re so easy to deep fry, and so fun to eat!
            </div>
    
    
        </div>
        <div class="obox box2">
            <span class="ibox yellow">BBQ Chicken Nachos</span>
            <div>
            These BBQ Chicken Nachos are the perfect appetizer for game day! Baked in the oven on a sheet pan, they are quick to make and perfect for serving a crowd.
             </div>
        </div>  
    
    </body>
    </html>

I tried to fix the problem and I have done it. I simple converted the ids to classes as ids are more specific but classes are not. Over-writing a class is is easy but overwriting an id is hard. So, I converted them to classes. This fixed all the problems. You also forgot to start to format a class using '.' in the last media query in css file. The size of media queries is not pretty much good. You can improve it easily. Change the size of the media queries as well as the size of the children they hold within them. I have fixed your problem but the size of media queries is not allowing them to function well. <br>
<b> Just go through the code I have written once and you will understand your mistakes! </b> <br>
<h1> Thank You </h1>

user_199161160

You need to place them inside containers with width of %percent that would add up (including the margins) to 100%.

Here's an example:

body * {
  box-sizing: border-box;
}

.container {
  height: 40px;
  width: 100%;
  border: 1px solid red;;
}

.col {
  width: 30%;
  margin-right: 5%;
  height: 40px;
  float: left;
  border: 1px solid green;
  background: rgba(255, 0, 128, 0.8);
}

.col:last-child {
  margin-right: 0px;
}
before
<div class="container">
  <div class="col">Hello</div>
  <div class="col">Hello</div>
  <div class="col">Hello</div>
</div>
<div style="clear:both"></div>

after

user_38073650
Related