Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hello all, CSS new guy here. I've been adapting well to this, but have
hit a snag. My pages look pretty good when the window is fully
expanded, but if you begin to collapse it or have it sized small (the
browser window), all the content starts to "stack" itself - making the
page look aweful. For instance, I float a div to the left and then have
another div that should display to the right of it. Full window, looks
great. Start to collapse the window and it puts the div that should be
to the right below the height floated div (essentially moving it out of
viewable space and creating a void to the right of what is viewable).
Here is an example of the code i'm using... any thoughts:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd ">
<title>BOUGHTON ARCHITECTS, INC. | Creativity to Build On</title>
<meta http-equiv="Content-Type" content="text/html;
<style type="text/css">

body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 9px;
    background-color: black;}

body a:link {
    color: white;
    text-decoration: none;}

body a:hover {
    color: #FFCC66;
    text-decoration: none;}

body a:visited {
    color: white;
    text-decoration: none;}

.holder {
    margin: 0px 0px 0px 225px;
    padding: 0px;
    text-align: left;
    width: 100%;}

#header {
    background-color: #FFCC66;
    margin: 0px;
    padding: 0px;}

#links {
    margin: 0px;
    background-color: black;
    padding-left: 5px;
    height: 25px;}

.lineheight {
    line-height: 250%;}

iframe {
    background-color: #336699;
    padding: 0px;
    width: 675px;
    height: 490px;
    float: left;
    border: 0px;
    frameborder: 0;
    scrolling: auto;}

#biglogo {
    margin: 0px 0px 0px 675px;
    height: 490px;
    background-color: #FFCC66;
    background-image: url(images/index/background_logo.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    border-left: 1px solid black;
    padding: 0px;}

#flash {
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px;}

body p {
    text-align: center;}

.colortext {
    color: #FFCC66;}

/* Hide from IE5-mac. Only IE-win sees this. \*/

* html #holder {
  position: relative;
  left: -3px;

* html #links {
     position: relative;
    top: -3px;}

* html #biglogo {
    position: relative;
    left: -3px;}

/* End hide from IE5/mac */

<script language="javascript">
function show_hide_text(divID){
var divArea = document.getElementById(divID)
var divAreaImg = document.getElementById(divID+"_img")
var divAreaVisible = divArea.style.display != "none"

    divArea.style.display = "none"
    divAreaImg.innerHTML = "[+]"
    divArea.style.display = ""
    divAreaImg.innerHTML = "[&minus;]"

    <div id="flash">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 "
width="225" height="600">
          <param name="movie" value="ba_nav.swf">
          <param name="quality" value="high">
          <embed src="ba_nav.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer "
type="application/x-shockwave-flash" width="225" height="600"></embed>
    <div class="holder">
        <div id="header">
            <a href="home.htm" target="container">
            <img src="images/index/top_text_2.jpg" alt="Boughton Architects,
Inc." border="0"></a>
    <div class="holder">
        <div id="links">
            <span class="lineheight">
                <span class="colortext">PROJECTS (</span>COMMERCIAL
                <a href="javascript:void(0);"
                    <span id="info_3" style="display:none;"><span class="colortext">|
                    <a href="view_list.asp?tNo=1001" target="container">Office</a> -
                    <a href="view_list.asp?tNo=1002" target="container">Medical</a> -
                    <a href="view_list.asp?tNo=1003"
target="container">Hospitality</a> -
                    <a href="view_list.asp?tNo=1004" target="container">Retail</a> -
                    <a href="view_list.asp?tNo=1005" target="container">Financial</a>
                    <a href="view_list.asp?tNo=1010" target="container">Religious</a>
                    <span class="colortext"> |</span>
                 - RESIDENTIAL
                <a href="javascript:void(0);" onClick="show_hide_text('info_4');"
Quoted text here. Click to load it
                    <span id="info_4" style="display:none;"><span class="colortext">|
                    <a href="view_list.asp?tNo=1006" target="container">Single
Family</a> -
                    <a href="view_list.asp?tNo=1007" target="container">Multi
                    <span class="colortext"> |</span>
                 - <a href="view_list.asp?tNo=1008" target="container">OTHER</a> -
                <a href="view_list.asp?tNo=1009" target="container">FUTURE</a>
                <span class="colortext">)</span> -
                <a href="container/about.htm" target="container">ABOUT US</a> -
                <a href="contact.htm" target="container">CONTACT</a> -
                <a href="container/employment.htm"
    <div class="holder">
        <iframe src="home.htm" name="container"></iframe>
        <div id="biglogo">



1995 Cobra wrote:

Quoted text here. Click to load it

I would consider this behaviour (based on your description, not the code,
because I'm too lazy to save it to a file and open it in a browser) as
good. If the content does not fit into the browser side by side, it is
rearranged, so the user does not have to scroll horizontally, which would
be bad (my mouse has a scroll wheel for vertical scrolling, which makes it
very easy - I don't think, mice with a second horizontal scroll wheel are
very common).
It is not really trivial to construct a page which 'degrades gracefully'
(and has a non-trivial layout). You'll have to also consider the 'small
window' case, and arrange your floats and stuff in a way that the document
is still usable in this case (correct or at least sensible order of

It is infact much easier to get this effect with CSS than
with 'table-layout', so you are already on the right track.

Quoted text here. Click to load it

Please upload your code to a website and post the URL - this way we can see
much easier whats going on. Most of us do not have a CSS capable HTML
rendering engine built into the brain.


Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://pink.odahoda.de /


Quoted text here. Click to load it

You can give the container the floats are in a width set in pixels. Then
if the viewport is smaller than that, you'll get a horizontal scrollbar,
but the floats won't jump underneath each other.

Alternatively (perhaps preferably as horizontal scrollbars are
unappealing) give the floats percentage widths so they get narrower
together with the viewport.

Floats jumping underneath each other when there isn't enough horizontal
space available is correct behaviour; so however you decide to fix it,
you basically have to make sure there's going to be enough room for them
to fit at the side.


Ben C wrote:
Quoted text here. Click to load it

Wow, good stuff. Setting that width gives me the desired affect with,
of course, one minor challenge. My first floated <div> (the flash) has
a specific width of 225px. The "holder" <div> will vary based on how
big someone's window is, but it's essential that it be the full width,
no more no less, regardless. I can't set it to 100% right, because then
it will still push itself under? Any thoughts?


1995 Cobra wrote:
Quoted text here. Click to load it

This is a strange newsgroup for me. I don't seem to be getting all the
posts. I don't see the post by "Ben C" that is being responded to above.
Are there multiple ways of posting to the group that might cause this?


Quoted text here. Click to load it

Not sure I understand. You have two left floats in a set-width
container, one that's 225px wide, and the other that you want to butt up
against it filling the remaining space?

You will just have to set the width manually-- there's no way to say
"100% - 225px" on a float unless you resort to scripting.

But if you've set the width on the container, it doesn't depend on the
viewport width, so I'm a bit confused.


Ben C wrote:

Quoted text here. Click to load it

Or if you give it a margin instead of float it.
If the left floated div is 225px wide, just set the second div to have
a left margin of 225px, don't float it. Then it will only drop below
the left floated div is there is content inside the right div that is
too wide.

Els                           http://locusmeus.com /
accessible web design:     http://locusoptimus.com /

Now playing: The Rolling Stones - Shake Your Hips


Quoted text here. Click to load it

Good suggestion, that way it will take up the rest of the available
width, whatever that might me.

Site Timeline