Jump to content

Footer Content Positioning


LucidFox1

Recommended Posts

Hi Peeps,

 

I'm new to the board. I'm just learning tableless web design and I'm already stumped on something...

 

 

Basically I'm attempting to create this (ww w.css.ad nets.com/final-example.png) footer that I mocked up. The problem I'm running into is when I start adding the content starting from the left side and working right is that I can get the first few items like the <h3> title and the underline image to float left with the margin I need but when I add the address, phone number, etc below it then throws off the alignment and they end up to the right of the paragraph above. This happens whether I clear the float above or not. Even setting a top margin for the <h3> at that point to move it below the paragraph will not get it over to the left again. I have tried coding the left block in a <ul> and paragraphs but neither seem to work right.

 

What is the best way for me to go about positioning these footer elements? I would have thought that I could float the first block to the left and then each proceeding block to the right? No matter what I try it doesn't seem to work with relative positioning. Hope that makes at least some sense.

 

You can view what I have so far live @ ww w.css.ad nets.com (remove spaces).

 

Your help would be greatly appreciated.

 

Thx,

LucidFox

Link to comment
Share on other sites

Adding "clear:both" to #contact-us should fix the specific issue you are having.

 

However, I would approach the footer using something like this:

<div id="footer">
<div class="col1">
... content ...
</div>
<div class="col2">
... content ...
</div>
<div class="col3">
... content ...
</div>
<div class="col4">
... content ...
</div>
</div>

#footer would wrap all footer elements, and would have "clear:both", and each column inside the #footer would be floated left and have a fixed width.

 

Hopefully that will help get you started? I know it took me a while to get a handle on using positioned divs rather than tables, but you will get it eventually.

Link to comment
Share on other sites

Thx a lot for the response. It gives me a lot to go on! A couple of questions ...

 

- Are you saying that I would need to add 'clear: both' on both #contact-us & #footer?

 

- You said "and each column inside the #footer would be floated left and have a fixed width." By fixed width do you mean 'width: 150px;' ?

 

Thx for the help!

LucidFox

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...