Hi,

 

I have a CSS issue.

 

I think it is to do with overflow but am not sure.

 

As you can see:

 

 

 

When the browser is made smaller (width) the div gose to the bottom and pushes the other div out of the way.

 

I want to stop it doing this?

Maybe there is too much padding on a regular screen therefore you need to reduce it when it hits certain break-point.

 

Showing your code would be helpful

I dont think it is the padding but this has been bugging me for ages and i cant work it out.

#SearchBar {
	height:40px;
	clear:both;
	overflow:auto;
	background-color:rgb(40, 40, 40);
}
#Container {
	height:auto;
	background-color:rgb(255, 255, 255);
}
#Search {
	height:autopx;
}
#SearchForm {
	width: 600px;
	margin-top: 60px;
	margin-right: auto;
	margin-left: auto;
}
#Footer {
	height: auto;
	width: 100%;
	background-color: rgb(249, 242, 250);
	bottom: 0;
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: lighter;
	padding-top: 6px;
	padding-right: 6px;
	padding-bottom: 6px;
	padding-left: 11px;
	border-top-width: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;

}
#SearchResultsPage {
	height:auto;
}

And here is my menu

nav ul {
	margin:0;
	padding:0;
}
nav ul li {
	list-style-type:none;
	float:left;
	display:block;
	width:100px;
	height:40px;
	text-align:center;
	line-height:40px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:17px;
}
nav ul li a {
	text-decoration:none;
	color:#FFF;
}
nav ul li:Hover {
	background-color:rgb(244, 244, 244);
	color:rgb(40, 40, 40);
}
nav ul li:Hover a {
	color:rgb(40, 40, 40);
}
nav a {
	display:block;
}

Can you post a live link or a fiddle, it's pretty difficult to spot the issue just from looking at your code.

 

One thing that's unlreated but I'll point out: Don't use IDs in your css, ID's make for great JavaScript hooks but cause all sorts of specificity issues in css. Use classes for styling.

 

You can use a lot of shortcuts in your code, where you have:

border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;

You could replace it with

border-top: 1px solid #ccc;

padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 11px;

Can be replaced with

padding: 6px 6px 6px 11px;

The capital on the H in your :Hover selector should be lowercase - not essential but keeping things lowercase improves readability.

Edited October 21, 201412 yr by rbrtsmith

nav ul li {
    list-style-type:none;
    float:left;
    display:block;
    width:100px;
    height:40px;
    text-align:center;
    line-height:40px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px;
}

I'd imagine the width:100px; isn't helping...

Can you post a live link or a fiddle, it's pretty difficult to spot the issue just from looking at your code.

 

One thing that's unlreated but I'll point out: Don't use IDs in your css, ID's make for great JavaScript hooks but cause all sorts of specificity issues in css. Use classes for styling.

 

You can use a lot of shortcuts in your code, where you have:

border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;

 

Those may have been automatically generated by a code editor. I remember using one some time back (an earlier version of Coda perhaps?) that would do this as a default. I agree with the point though, it's extra fluff that's not required.

 

Those may have been automatically generated by a code editor. I remember using one some time back (an earlier version of Coda perhaps?) that would do this as a default. I agree with the point though, it's extra fluff that's not required.

 

One of the many good reasons developers should avoid code generators

Is this a responsive or mobile website? If not then I wouldn't worry too much about the website breaking in a browser that looks less than 300px. The problem appears to be that the browser isn't wide enough to accommodate the three explicitly sized list-items forcing the last child down a level in order to maintain its given 100px width.

 

The only overflow property I see is that on your #SearchBar and a value of auto shouldn't cause this problem.

The smallest common screen width for mobile is 320px, there is no reason, at the moment at least to test below this.