hi there, I've designed a simple site with the navigation sitting in a small column on the left and the main content on the right. Each is in its own <div> and then floated to get the two columns.
All seems to be working in Firefox and the latest NN, but it breaks in IE and also Opera. Curiously, the first time you view the page in IE, the body content is beneath the navigation column, rather than alongside it. In IE clicking refresh corrects the problem, and then even clearing the cache doesn't cause the problem to reappear when refreshed again.
In Opera, it doesn't get fixed at all.
Does anyone know what might be causing this? I've read that defining the width of a block alongside a float can cause problems - will it be something to do with this?
I'd *really* appreciate any help on this
thanks,
Essentially everything in the page is contained with:
.holder {
position: absolute;
top: 60px;
}
and the main right column is contained within:
.body_content {
margin-top: 30px;
width: 500px;
float: left;
position: relative;
}
and the left hand column is in:
.buttons {
float: left;
position: relative;
width: 193px;
}You have three options:
1) try one of the example layouts from some of the css sites like <!-- m --><a class="postlink" href="http://www.bluerobot.com/web/layouts/">http://www.bluerobot.com/web/layouts/</a><!-- m --> or just google 2 column css layout.
2)paste the entire page code in
3) link to it.
I'm not sure what you want your code to do...
Press 1 to phone a friend, 2 for a 50-50 choice or any key to quit...sorry - here's a link to the page <!-- w --><a class="postlink" href="http://www.salmacis.co.uk/leesroxburgh/">www.salmacis.co.uk/leesroxburgh/</a><!-- w --> - I'll have a look at the bluerobot site shortlyok change of design thought process for you:
For the menu, have:
float: left;
width: [whatever]px;
for the content:
margin-left: [whatever]px
where [whatever] is the same dimension, or slightly larger if you want a margin.
Also I'd suggest css for the menu, but I can't knock that up as an example from uni (lack of software!).
Maybe I'll look into it when I get home.great stuff - thanks!I would take out the <div class="holder"> altogether. It's giving an absolute position to something that would be there anyway.
The body_content does not need to be floated left. Just float the buttons left and the body will automatically pull up to the right of the buttons. Setting the width of the body_content may be what's causing it to drop below the button section. If you take out the width then the design would be more fluid. It would expand and contract with the browser window without dropping the body below the buttons.or just put a margin-top on the .holder, instead of positioning.thanks for your help - that's fixed it!np
Nice site design btw. only things bugging me are the space to the left of the menu and the way you have some industrial photos at the top of the recent projects page - maybe rearrange the order?
All seems to be working in Firefox and the latest NN, but it breaks in IE and also Opera. Curiously, the first time you view the page in IE, the body content is beneath the navigation column, rather than alongside it. In IE clicking refresh corrects the problem, and then even clearing the cache doesn't cause the problem to reappear when refreshed again.
In Opera, it doesn't get fixed at all.
Does anyone know what might be causing this? I've read that defining the width of a block alongside a float can cause problems - will it be something to do with this?
I'd *really* appreciate any help on this
thanks,
Essentially everything in the page is contained with:
.holder {
position: absolute;
top: 60px;
}
and the main right column is contained within:
.body_content {
margin-top: 30px;
width: 500px;
float: left;
position: relative;
}
and the left hand column is in:
.buttons {
float: left;
position: relative;
width: 193px;
}You have three options:
1) try one of the example layouts from some of the css sites like <!-- m --><a class="postlink" href="http://www.bluerobot.com/web/layouts/">http://www.bluerobot.com/web/layouts/</a><!-- m --> or just google 2 column css layout.
2)paste the entire page code in
3) link to it.
I'm not sure what you want your code to do...
Press 1 to phone a friend, 2 for a 50-50 choice or any key to quit...sorry - here's a link to the page <!-- w --><a class="postlink" href="http://www.salmacis.co.uk/leesroxburgh/">www.salmacis.co.uk/leesroxburgh/</a><!-- w --> - I'll have a look at the bluerobot site shortlyok change of design thought process for you:
For the menu, have:
float: left;
width: [whatever]px;
for the content:
margin-left: [whatever]px
where [whatever] is the same dimension, or slightly larger if you want a margin.
Also I'd suggest css for the menu, but I can't knock that up as an example from uni (lack of software!).
Maybe I'll look into it when I get home.great stuff - thanks!I would take out the <div class="holder"> altogether. It's giving an absolute position to something that would be there anyway.
The body_content does not need to be floated left. Just float the buttons left and the body will automatically pull up to the right of the buttons. Setting the width of the body_content may be what's causing it to drop below the button section. If you take out the width then the design would be more fluid. It would expand and contract with the browser window without dropping the body below the buttons.or just put a margin-top on the .holder, instead of positioning.thanks for your help - that's fixed it!np
Nice site design btw. only things bugging me are the space to the left of the menu and the way you have some industrial photos at the top of the recent projects page - maybe rearrange the order?