DIVs move as browser window is extended

HTML & CSS
1

Hi everybody,

New to the forum and relatively new to HTML and CSS, so signed up cause I’m having a bit of a problem with some DIVs moving around as the browser window is extended or made smaller. Can’t post too much of the code as this is for a class assignment but should hopefully be enough to give you an idea of the problem.

div#logo {
width: 205px;
height: 100px;
margin-left: 180px;
padding: 0px;
float: left;
}

div#logoheader {
background-color: #003366;
float: right;
margin-right: 183px;
height: 98px;
width: 695px;
border-style: solid;
border-color: white;
border-width: 1px;
font-size: 60px;
vertical-align: text-bottom;
}

These two elements appear next to each other, but the ‘logoheader’ div basically slides underneath the ‘logo’ div when the window is made smaller, and slides too far to the right of the ‘logo’ div when the window is extended to full size. Is there any way to fix these divs in one place or perhaps combine them into one div?

2

Hi ThorntonStuart. Welcome to the forums. :slight_smile:

Normally, you’ll want to place these floated elements inside a container that has a set width (or perhaps instead a max-width and min-width) and is perhaps centered on the screen. Otherwise, elements that are just floated and scattered all over the screen will move around all over the place depending on the width of the browser window etc.

Make sure to post your HTML too when asking layout questions, because CSS on its own is out of context. :slight_smile:

3

Ahh okay. Yeah for this layout I didn’t include a container for the entire layout, so can I create a container solely for these elements to keep them in the right position or are you referring to a container for the entire layout? I’ll try out the max/min-widths first though, thanks!

4

You can do either … and it’s also quite normal to do both. :slight_smile:

5

Ahh great, I’ll give it a shot! Thanks!