How to fix this CSS code?

Spydah

New Member
Oct 28, 2011
9
1
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.
UKHWSlH.png


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
Code:
@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
 

Spydah

New Member
Oct 28, 2011
9
1
Code:
<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

Posting Freak
Aug 5, 2010
833
136
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
CSS:
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
CSS:
  .pull-right {
    float: none !important;
    display: block !important;
  }
from
CSS:
@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,
 

Spydah

New Member
Oct 28, 2011
9
1
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

Active Member
Dec 16, 2018
174
74
dont know if this has been fixed but try using flexbox. remove the old display and add these attributes to #main-block
CSS:
display: flex;
flex-direction: column;
 

Higoka

Active Member
Dec 16, 2018
174
74
Use this for all browsers:

Code:
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
 

Users who are viewing this thread

Top