Problem with css, float or fixed? layout moves with window size

  • Hi!

    My site: https://andeinerseite.fi/

    I wonder if anyone could help… I’m not good with css and I can’t for the life of me figure how to fix the blooper I have on my site. I don’t know how to position the header, left, right and center objects so that they don’t ‘drop down’ when you resize the window thinner.

    Right now they’re on ‘float’, but how can I get them to stay fixed in relation to each other whether the window gets bigger or smaller?

    Anyone? Help is greatly appreciated ??

Viewing 3 replies - 1 through 3 (of 3 total)

  • Clear the floats…

    normally you got something like this:

    ----header----
-left-sidebar-
----footer----

    in divs:

    <div id="header"></div>
<div id="page">
  <div id="left"></div>
  <div id="sidebar"></div>
</div> <!-- end page -->
<div id="footer"></div>

    and the css:

    #header {
  width: 900px;
}

#page {
  width: 900px;
}

#left {
  width: 550px;
  float: left;
}

#sidebar {
  width: 300px;
  float: left;
}

#footer {
  clear: both;
  width: 900px;
}

    Of course, this is a simplified example. An URL to your site would help though.

    Peter

    My site: https://andeinerseite.fi/

    And there it is ??

    Peter

    In your case, put #side1, content and #side2 in a separate wrapper, with a width (say: 900px).

    <div id="contentwrapper">
  <div id="side1"></div>
  <div id="content"></div>
  <div id="side2"></div>
</div> <!-- contentwrapper -->

    Peter

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with css, float or fixed? layout moves with window size’ is closed to new replies.