How to fix this CSS code?

[Spydah]

To explain it in the best way I think it's to say that it's borderless and as soon it doesn't find anything beside it it'll drop the text underneath it.

This is what it looks like without the lines I drawed.

The grey line is where I want it to be seperated and the white line is to show where the text has to go.

This is the .css

@media (max-width: 767px) {
    h3 {
        text-align: center !important;
    }

    .pull-right {
        float: none !important;
        display: block !important;
    }
}

.clr{
    clear:both !important;
}

#main-block{
    float:right !important;
    display:block !important;
    width:70% !important;
    margin: auto !important;
    border: 0px !important;
    position: fixed !important;
}

#sidebar{
    float:left !important;
    width:20% !important;
    height:20% !important;
    text-align:center !important;
}

Appreciate the help

 

[Johno]

Is the div inside the correct div within the HTML ?

 

[Spydah]

<div id="sidebar">
                                {>uPicture} <br/ >
                                <strong>{>userName}</strong>
                                <br/ ><br/ >
                                {role}
                        </div>
                        
                        <div class="main-block">
                            <h3>
                                {title}
                                <small class="pull-right tiny">
                                    {date}
                                </small>
                            </h3>
                            <hr />
                            <p>[{text}]</p>
                            </div>

 

[GarettM]

So @Spydah i believe your screen is less then 767px lol the only time the text does what your image shows is when you clear the

float: none !important

css attribute, this is not needed and breaks things

Simple solution: remove the float override in screens less then 767px wide
Emit

  .pull-right {
    float: none !important;
    display: block !important;
  }

from

@media (max-width: 767px) {
  h3 {
    text-align: center !important;
  }
 /** this is where .pull-right used to be **/
}

Better solution: Look into better layout systems using CSS, flexbox i believe is supported by most modern browser know and days,

You must be registered for see links

 

[Spydah]

I've removed that divbox completely but still didn't work plus that was not what I was talking about, sorry if you misunderstood me, the .pull-right was only for the date and that worked perfectly fine however I've removed it now and yet the text doesnt stay in his box.

 

[Higoka]

dont know if this has been fixed but try using flexbox. remove the old display and add these attributes to #main-block

display: flex;
flex-direction: column;

 

[Nigo]

dont know if this has been fixed but try using flexbox. remove the old display and add these attributes to #main-block

display: flex;
flex-direction: column;

Use this for all browsers:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column; 
-ms-flex-direction: column;
flex-direction: column;

 

[Higoka]

Use this for all browsers:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

no. you dont need them flexbox is supported by 98.45%. only IE10 needs prefix but nobody uses it anyway

 

[GarettM]

no. you dont need them flexbox is supported by 98.45%. only IE10 needs prefix but nobody uses it anyway

even Microsoft is abandoning ie