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

  • memororis

    (@memororis)


    16 years, 8 months ago

    Hi!

    My site: http://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)
  • Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    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

    Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    My site: http://andeinerseite.fi/

    And there it is 🙂

    Peter

    Peter Boosten

    (@pboosten)

    16 years, 8 months ago

    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.