CSS window width resize issues

Question

I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.

They are positioned fine however when I resize the screen they seem to fall below one another.

I have min-width: 947px; in the body of the CSS however this does not do anything.

HTML:

<div id ="featured1">

</div>

<div id ="featured3">

</div>  

<div id ="featured2">

</div>

CSS:

#featured1{


float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;

}

#featured2 {

display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
} 

#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;

border:1px solid black;
width:250px;
height:150px;
margin-right:200px;

}

For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.

Gyandeep · Accepted Answer · 2013-10-12T20:43:38.643

2

Here is the working example: jsFiddle link

use

display: inline-block;

on all 3 divs, then they wont go down. Note: this property will not work on IE7 and smaller versions.

You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px. Thats why its breaking.

Please add vertical-align: top; property on all the divs

edited Oct 12 '13 at 20:43

answered Oct 12 '13 at 20:06

Gyandeep

12,726
4
31
42

When I enter text into one of the boxes it falls? – Ryman Holmes Oct 12 '13 at 20:31
Please add `vertical-align: top;` property on all the `divs`... please play with CSS if you face more issue. my answer was based on your question you asked. – Gyandeep Oct 12 '13 at 20:44

score 1 · Answer 2 · answered Oct 13 '13 at 03:48

This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).

HTML:

<div id="container">
    <div id="featured1">
        Featured 1
    </div>
    <div id="featured2">
        Featured 2
    </div>
    <div id="featured3">
        Featured 3
    </div>
</div>

CSS:

#container {
    position: absolute;
    width: 836px;
    height: 190px;
    }
#featured1, #featured2, #featured3 {
    position: relative;
    font-family: 'Lobster13Regular';
    font-size:  35px;
    float: left;
    left: 20px;
    top: 20px;
    width: 250px;
    height: 150px;
    border: 1px solid #000;
    overflow: hidden; /*Remove if you are not going to overflow text in each element*/
    }
#featured2, #featured3 {
    margin-left: 20px;
    }

CSS window width resize issues

2 Answers2