Div missing it's height, weight and literally everything

Question

In each div#tickets I have an image and some text.

My expected result: In bigger screen inside #tickets the text will be beside the image and in smaller screen the text will be down the image. The parent div (#tickets) of the image and text has a white background and black text.

But height, weight, background color, parent divs nothing is working out. The result is being absolute mess. Can anyone help?

I tried using box-sizing:border-box also, but result is same.

*{
    background-color:black;
}
fieldset{
    max-width:960px;
    margin:0 auto;
    border-color: transparent;
    position: relative;
    }
    
#tickets{
    max-width:100%;
    background-color:white ;
    border-radius:25px;
    color:black;
    margin:25px;
    font-size:70px;

}
@media screen and (max-width: 600px) {
#tickets{
    margin:25px 10px;
    font-size:70px;

}

}
#tickets img{
    width:40%;
    float:left;
    margin-right:30px;
}
@media screen and (max-width: 600px) {
#tickets img{
    width:100%;
    margin-right:0 auto;
}
}

<fieldset>
<div id="tickets">
    <img src="https://st.depositphotos.com/1428083/2946/i/950/depositphotos_29460297-stock-photo-bird-cage.jpg">
    <div class="text">
    Hello
    </div>
</div>
<div id="tickets">
    <img src="https://st.depositphotos.com/1428083/2946/i/950/depositphotos_29460297-stock-photo-bird-cage.jpg">
    <div class="text">
    Hello
    </div>
</div>
</fieldset>

@Spectric In bigger screen the text will be beside the image and in smaller screen the text will be down the image. — Mehdi Aziz Rafi, Jul 05 '21 at 15:42
So on big screen you want: Image text */next row*/ Image text, is that right ? — Dendenzilla, Jul 05 '21 at 15:55
@Dendenzilla As I have already set the image float left, Won't it float the image to left and text to right? I think I do not need new row. — Mehdi Aziz Rafi, Jul 05 '21 at 15:57

Dendenzilla · Accepted Answer · 2021-07-05T16:17:16.443

With flex you can have the text next to the image (if you need the second row to be reversed simply use 'flex-direction:row-reverse;') and have it underneath on smaller screen.

Also you should use classes and not ID if you use it more than once.

*{
    background-color:black;
}
.text {
  background-color:inherit;
  color:black;
}
fieldset{
    max-width:960px;
    margin:0 auto;
    border-color: transparent;
    position: relative;
    }
    
.tickets{
    max-width:100%;
    background-color:white ;
    border-radius:25px;
    color:black;
    margin:25px;
    font-size:70px;
  display:flex;

}
.tickets img{
    width:40%;
    float:left;
    margin-right:30px;
}
 .tt{
    flex-direction:row-reverse;
  }
@media screen and (max-width: 600px) {
.tickets{
    margin:25px 10px;
    font-size:70px;
  flex-direction:column;
  
}
 
}

@media screen and (max-width: 600px) {
.tickets img{
    width:100%;
    margin-right:0 auto;
}
}

<fieldset>
<div class="tickets">
    <img src="https://st.depositphotos.com/1428083/2946/i/950/depositphotos_29460297-stock-photo-bird-cage.jpg">
    <div class="text">
    Hello
    </div>
</div>
<div class="tickets" class="tt">
    <img src="https://st.depositphotos.com/1428083/2946/i/950/depositphotos_29460297-stock-photo-bird-cage.jpg">
    <div class="text">
    Hello
    </div>
</div>
</fieldset>

No. The parent div (#tickets) of the image and text has a whole white background and white color text. Your code facing a problem as well. Please check your result in bigger screen [link](https://codepen.io/mehdi-aziz-rafi/pen/rNmxyMg) — Mehdi Aziz Rafi, Jul 05 '21 at 16:10
@MehdiAzizRafi I edited my pen, I corrected some mistakes you made with the code, regarding the backgrounds and colors I modified them so it's visible, but I'm not really sure what you're trying to achieve. You need to explain better what you want. — Dendenzilla, Jul 05 '21 at 16:18

score 0 · Answer 2 · answered Jul 05 '21 at 16:19

I think it happens for float property. You can use display flex for this

*{
    background-color:black;
}
fieldset{
    max-width:960px;
    margin:0 auto;
    border-color: transparent;
    position: relative;
    }
    
#tickets{
    max-width:100%;
    background-color:white ;
    border-radius:25px;
    color:black;
    margin:25px;
    font-size:70px;
    display:flex;

}
#tickets img{
    width:40%;
    margin-right:30px;
}
#tickets .text{
    width:60%;
}
@media screen and (max-width: 600px) {
#tickets{
    margin:25px 10px;
    font-size:70px;
    flex-direction: column;
}
#tickets img{
    width:100%;
    margin-right:0 auto;
}

}

<fieldset>
<div id="tickets">
    <img src="https://st.depositphotos.com/1428083/2946/i/950/depositphotos_29460297-stock-photo-bird-cage.jpg">
    <div class="text">
    Hello
    </div>
</div>
<div id="tickets">
    <img src="https://st.depositphotos.com/1428083/2946/i/950/depositphotos_29460297-stock-photo-bird-cage.jpg">
    <div class="text">
    Hello
    </div>
</div>
</fieldset>
enter code here

Div missing it's height, weight and literally everything

2 Answers2