QUIT MOVING MY STUFF!

1

1995 Cobra

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:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BOUGHTON ARCHITECTS, INC. | Creativity to Build On</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<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 */

</style>
<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"

if(divAreaVisible){
divArea.style.display = "none"
divAreaImg.innerHTML = "[+]"
}else{
divArea.style.display = ""
divAreaImg.innerHTML = "[&minus;]"
}
}
</script>
</head>

<body>
<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>
</object>
</div>
<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>
</div>
<div class="holder">
<div id="links">
<span class="lineheight">
<span class="colortext">PROJECTS (</span>COMMERCIAL
<a href="javascript:void(0);"
onClick="show_hide_text('info_3');"><span
id="info_3_img">[+]</span></a>
<span id="info_3" style="display:none;"><span class="colortext">|
</span>
<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>
</span>
- RESIDENTIAL
<a href="javascript:void(0);" onClick="show_hide_text('info_4');"
<span id="info_4_img">[+]</span></a>
Click to expand...
<span id="info_4" style="display:none;"><span class="colortext">|
</span>
<a href="view_list.asp?tNo=1006" target="container">Single
Family</a> -
<a href="view_list.asp?tNo=1007" target="container">Multi
Family</a>
<span class="colortext"> |</span>
</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"
target="container">EMPLOYMENT</a>
</span>
</div>
</div>
<div class="holder">
<iframe src="home.htm" name="container"></iframe>
<div id="biglogo">
</div>
</div>
</body>
</html>
 
B

Benjamin Niemann

Hello,

1995 said:
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:
Click to expand...

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
content).

It is infact much easier to get this effect with CSS than
with 'table-layout', so you are already on the right track.
[snip HTML code]
Click to expand...

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.


HTH
 
B

Ben C

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:
Click to expand...

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.
 
1

1995 Cobra

Ben said:
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.
Click to expand...

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?
 
J

John Salerno

1995 said:
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?
Click to expand...

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?
 
B

Ben C

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?
Click to expand...

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.
 
E

Els

Ben said:
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.
Click to expand...

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.
 
B

Ben C

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.
Click to expand...

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Closing an overlay outside the overlay as well 1
Help with my responsive home page 2
Is it possible an iframe can overlapp another? 3
Positioning CSS components 1
Help with Visual Lightbox: Scripts 2
Buttons lining up 1
How can I get my menu inside of a menu to function properly? 1
Help with code 0

Members online

Total: 42 (members: 2, guests: 40)
Robots: 442

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,049
Latest member
Allen00Reed

Latest Threads

Top