CODEWITHSUNDEEP
csshtmlalignment
dweeman
dweeman

Reputation: 89

How can I prevent div overflow with container width 100%

I am trying to find a neat way to get my header to have a width of 100% (so I can use a background colour that spreads across the whole page), but also within it I have two images, that I'd like to stay inline and not overflow on each other or push each other down.

I currently have the follow CSS:

header {    
width: 100%;
height: 150px;  
padding: 50px 50px 10px 50px;
clear: both;
background: #185f96;}

#logo {
float: left;
width: 800px;}

#phone { float: left; width: 200px; }

Logo and phone are inside the header. If you look at it in action (removed) you can see if you size it down to a certain point, the phone info gets pushed under the banner. I can set it to a static width, but then this is an issue with different web sizes.

I created an extra div inside the header in which I just put the logo, and left the phone on the outside. This gives me the results I want, but I want wondering if there was a neater way of achieving this without the extra div.

(Also sorry for the formatting of the code section, I have trouble getting it to be neatly formatted. Doesn't seem to work properly)

Upvotes: 3

Views: 12451

Answers (2)

NoobEditor
NoobEditor

Reputation: 15891

Set width is percentage and then add white-space:nowrap; to header to prevent things from to a new line

header {    
    width: 100%;
    height: 150px;  
    padding: 50px 50px 10px 50px;
    clear: both;
    background: #185f96;
    white-space:nowrap; /*added*/
}

#logo {
    float: left;
    display:inline-block; /* or width in percentage */
}

#phone {    
    float: left;
    min-width: 20%; /* ammended */
}

Upvotes: 0

Sushan
Sushan

Reputation: 3233

Reduce your page with and use % unit in padding too as.

header {    
width: 84%;
height: 150px;  
padding: 5% 5% 1% 5%;
clear: both;
background: #185f96;}

#logo {
float: left;
width: 800px;}

Upvotes: 1

Related Questions