1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

layout problem: why doesn't this work?

CSS math is a mystery to me

         

ken_b

2:21 am on Nov 29, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Keep in mind I'm new to CSS.

I've been trying to solve this for a couple of weeks hunting all over the web for an answer.. I'm trying to convert a table based layout to CSS. (I can make this work exactly as I expect by using a old fashioned table inside the "wrapper" div instead of using the "header", "nav" and "maincontent divs".)

Inside the "wrapper" dive I'm expecting the "maincontent" div to appear on the right side of the "nav" div. It does, but not in a window smaller than 640px, smaller and the "maincontent" div floats down instead of simply getting narrower.

<DOCTYPE HTML>
<html>
<head>
<title>test-page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.wrapper {
float: left;
width: width:100%; max-width:640px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
border: 0px solid black;
}

.header {
float: left;
width: width:100%; max-width:640px;
margin: 0px 0px 0px 0px;
padding-left: 0px;
text-align: left;
border: 0px solid black;
}

.nav {
float: left;
width: width:100%; max-width:120px;
margin: 5px 0px 0px 0px;
padding-left: 0px;
text-align: left;
border: 0px solid black;
}
.maincontent {
float: left;
width: width:100%; max-width:480;
margin: 5px 0px 0px 0px;
padding-left: 15px;
text-align: left;
border: 0px solid black;<br>
}

</style>
</head>

<body style="max-width:1024px; bgcolor="#FFFFFF" text="#000000">
<div class="wrapper">
<div class="header">
<img style="height:auto; width:100%; max-width:640px;" src="/headerImage.jpg">
</div>

<div class="nav">
<p>MainNavigation<br>
Nav1<br>
Nav2<br>
Nav3<br>
Nav4<br>
etc </p>
</div>

<div class="maincontent">
A Few Words<br>
<img style="height:auto; width:100%; max-width:470px;" src="/another.jpg" width="468" height="351"><br>
more words
</div>
</div>

</body>
</html>

not2easy

3:10 am on Nov 29, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



One way to help find the cause of things that aren't working quite right for me is to take the whole thing to the w3 Jigsaw Validator: [jigsaw.w3.org...] to let it show me any errors that might be in the way. This part stands out at first glance: 
width: width:100%; max-width:640px;
Try it without the width: width: at the start of the line. Also when you set a max-width, you can leave off the width because it will never be wider than its max-width setting and only that width if the contents require it.

I'll take a more thorough look at the entire code when I have a chance.

ken_b

5:07 am on Nov 29, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks for the comments.

OK, I ran the page through the w3 Jigsaw Validator after removing the width: width:

I got it to validate with a few changes.

But it still doesn't work as expected.

Now it only works as expected at 640 px, above and below that it falls apart. Below that the maincontent div floats down under the nav div. At 728 the nav div floats up to the right of the header div.

But it's getting late here, so enough for tonite.

not2easy

6:40 am on Nov 29, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



To control the behavior of things at different sizes you might want to use floats only at desktop size. Their natural behavior is to go down below the previous floated element. At smaller screen sizes try using display: block for those divs.

On one template I use similar to the layout it looks like you're trying for, I use display: table-cell rather than floats for divs that I want to display side by side and at smaller widths use a media query like: 
@media (max-width: 22em)
{
header { display: block; }
nav, #banner2 { display: block; }
}
To replace the display: table-cell behavior that lets the divs sit side by side at wider widths. It all depends on the content and where you want it to be shown as to what is the best way to deal with the display: properties of your elements.

ken_b

7:13 pm on Nov 29, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hopefully this post doesn't just confuse the issue.

I'm trying to get to a layout like this, where the whole thing shrinks down on windows below 640 px.
(repetition of lines just for some idea of location (their is only 1 nv div, etc))

HHHHHHHHHHH
nv mcmcmcmcmc
nv mcmcmcmcmc
nv mcmcmcmcmc
nv mcmcmcmcmc

I have more on the page, but it's the part shown above that is not working.

The following examples all use the table instead of the header, nav and maincontent divs inside and work fine. I can get this whole code to validate, but then it stops working as planned.

I'm so confused.

The whole page looks like this where the header, nav and main content are in a table inside a wrapper and the 3 right side divs and footer are outside the wrapper div. The right side divs and footer work fine.

This is with a body max-widy of 1024px.

HHHHHHHHHHH r1r1r1
nv mcmcmcmcmc r1r1r1
nv mcmcmcmcmc r2r2r2
nv mcmcmcmcmc r2r2r2
nv mcmcmcmcmc r3r3r3
nv mcmcmcmcmc r3r3r3
nv mcmcmcmcmc r4r4r4
nv mcmcmcmcmc r4r4r4
FFFFFFFFFFFFFFFFFF

In this layout (using the table) the right side divs have a max-width of 300px.

On a window of 640px the layout looks like this
HHHHHHHHHHH
nv mcmcmcmcmc
nv mcmcmcmcmc
nv mcmcmcmcmc
nv mcmcmcmcmc
nv mcmcmcmcmc
r1r1r1 r2r2r2
r1r1r1 r2r2r2
r1r1r1 r2r2r2
r3r3r3 r4r4r4
r3r3r3 r4r4r4
r3r3r3 r4r4r4
FFFFFFFFFFFFFFFFFF

Which is fine.

Below 640 it looks like this (The main content gets narrower and longer, which is what I expected)
HHHHHHHH
nv mcmcmc
nv mcmcmc
nv mcmcmc
nv mcmcmc
nv mcmcmc
nv mcmcmc
nv mcmcmc
nv mcmcmc
r1r1r1
r1r1r1
r1r1r1
r2r2r2
r2r2r2
r2r2r2
r3r3r3
r3r3r3
r3r3r3
r4r4r4
r4r4r4
r4r4r4
FFFFFFFFFF

lucy24

8:15 pm on Nov 29, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm expecting the "maincontent" div to appear on the right side of the "nav" div. It does, but not in a window smaller than 640px, smaller and the "maincontent" div floats down instead of simply getting narrower

This is where we insert a chorus of
I really hate this damned machine
I wish that they would sell it
It never does quite what I want
But only what I tell it.

Every single element in the quoted CSS is labeled "float: left" so you can hardly fault it for, well, floating. If you want two things to stay side by side you can't float them; you have to use some other option such as "display: inline-block".

not2easy

8:55 pm on Nov 29, 2015 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



What you're try to get to can be done but as mentioned, using display properties to your advantage. One of the best articles I've read is at CSS Tricks: [css-tricks.com...] that help us understand and use the properties of tables (without using tables), by setting display: properties that change with width of a container.

ken_b

10:22 pm on Nov 29, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



OK, I'll read up on that and see if I can get the idea.

Thanks.

Fotiman

2:09 pm on Nov 30, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You might also take a look at using flexbox properties. There's another good CSS-Tricks article on that here: [css-tricks.com...]

ken_b

6:18 pm on Nov 30, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Thanks Fotiman, I'll check it out.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026