Whirlpool

Guys,

Just need a help laying something out in CSS, as i'm fairly new to it.

Can you guys please scrutinise the page that i've created. Its at http://www.lmcin.com/how.php.

Firstly, have I layed it out correct, using DIV's where they should be? Specifically, I want the part on the right to not hang out. As you can see, its bigger than a total of 760pixels wide; it hangs out of the right past the header.

Why does the left DIV go under the navigation, but the DIV on the right goes under the actual header?

Also, I have a picture that needs to sit at the very bottom right above the footer. How would I go about this?

Cheers

instead of absolutely positioning the howtocontainer, you should be using float:right;

it may help you to use clear: both; overflow: hidden; on the container. eg.

{div class="container"}
{div class="main"} {/div}
{div class="sidebar"} {/div}
{/div}

float the main left and the sidebar right and fix widths. it's good practice to use descriptive tags relating to structure instead of content or colour, as content and colour may change.

your total width is 760px, your sidebar has 168px wide images (say 170px wide sidebar) and your main area has 600px wide areas.

600+168 = 768 = overflow. simply scribbling out widths on paper can help a lot in CSS layout.

footer?

{div id="footer"}
{p class="rightalign"}{img /}{/p}
{p class="footerimage"}footer text on image{/p}
{/div}

.footerimage { display: block; width: 760px; height: Xpx; background: transparent url('currentimageurl.jpg') no-repeat center top; text-indent: -6000px; font-size: 0.01%; color: #fff; }
.rightalign { text-align: right; }

would be my own take on the footer – much more accessible and looks better when styling is turned off.

Thanks very much for the reply mate. I have done that with the footer, and have also made the changes to the layout, although it is floating at the bottom. How would I go about having it up the top where it should be?

for the footer, add { clear: both; } to it and it'll clear itself past all other elements on the page.

also, move the {div} for howrightcontainer outside the closing {/div} of the howleftcontainer.

for clarity's sake, I'd also suggest putting these in another container, say .bodycontainer or .maincontainer.

my div code for what you're doing would tend to look like:

#Page
#Wrapper
#Menu
#MainWrapper
#Main
#Sidebar
#Footer

everything which is a container to have overflow:hidden to prevent faux-scrolling and clear:both; to position it correctly.

in this case I'd do #Main { float: left; width: 580px; } #Sidebar { float: right; width: 160px; } and keep exact gutters/spacing – because sites look much more visually appealing if padding/margins are consistent and exact. (even better if you're using golden rule/multiples)

being simpler, it's floating at the bottom right but correctly (eg. to the right hand side) because it's clearing the last {p} tag before it.

Thanks for the reply. That worked great.

Now one more problem, if you have another look at www.lmcin.com/how.php I need to get the bottom of the tree to be in line with the text in the box at the bottom that says "Each morning..." and on the right side.

How would I go about this?

You don't need position:absolute if your using floats, the right section overlaps half the left section for me. From howright-container, remove positon:abolute, clear:both,left and top.

Can't work out how why the image won't move vertically down when you float it as well, something simple i'm missing, but just float the tree image div tag, and set its width to 185 and also set the images width to 185. Also you'll need to change the width of the div that contains the text at the bottom you want next to the tree to be the same width as the rest of its content area, otherwise it overlaps and you miss part of the words. Btw this is all in FF not sure how it looks in IE.

Lockmac writes...

How would I go about this?

you could try position: relative, and use negative margin-top, and maybe about 500px for margin-left.

that didnt work :( it didnt movie it at first and when i increased the margin-top a little bit more, it completely disappeared

show us how you're doing it (works fine for me)

It's not currently on the web server, but I have the following set:

.howright-bottomtree
{
position:relative;
margin-left:500px;
margin-top:-280px;
}

and in the actual file:

<div class="howright-bottomtree">
<img src="images/how_bottomtree.png" />
</div>

The tree stays at the very bottom. Once I make the margin-top more than 279, it moves from being at the very bottom to the very top. Every increase in margin-top just pushes it up further.

I have this div at the very bottom of the file (inside the container div though and just before the footer div

rescued from the recycle bin. i'll leae it with you to put into a csss file :P

<DIV style='position:relative; margin-top:-260px; margin-left:560px; border:1px solid #ff0;float:left;'>
<IMG src="how_bottomtree.png">
</DIV>

ironheart writes...

rescued from the recycle bin

O wow. Worked a treat. Must have been the float property that I left out. Once again, Thanks!