Another Div Alignment issue

Question

I just posted on here with a problem that I am having with div alignment. My original question was answered but now I am having yet another issue. Link to what I am trying to do: Click here for the images (Nothing harmful by clicking on link) and by the way, this is NOT for homework. The top image (Something I created in Fireworks) on the link is the layout I was first trying to do (I got that issue resolved), but now I am trying to add a sitename div and as you see in the second picture, it is creating issues with the right div.

I am really off my game yesterday and today and making these simple stupid mistakes. I just need another pair of eyes to see what my issues are. Thanks.

CSS:

#header {
width:750px;
height:341px;
margin-left:25px;
display:block;
}
#tableleft {
float: left;
width: 128px;
margin-left:10px;
margin-right: 5px;
margin-top:10px;
}
#Sitename {
text-align: center;
white-space: normal;
display: table;
float: left;
width: 400px;
height:40px;
margin-top:10px;
margin-left:25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;

}
#tablecenter {
margin-left:20px;
float: left;
width: 410px;
margin-bottom:5px;
margin-top:30px;
}
#tableright {
float: right;
width: 128px;
margin-left: 20x;
margin-right:10px;
margin-top:10px;
margin-bottom:5px;
}

HTML:

<div id="header">
  <div id="tableleft">
    <div align="center">
      <p><img src="images/SmWhitepic.jpg" width="118" height="87" /></p>
      <p>&nbsp;</p>
      <p><img src="images/SmWhitepic.jpg" width="118" height="87" /></p>
      <p>&nbsp;</p>
      <p><img src="images/SmWhitepic.jpg" width="118" height="87" /></p>
    </div>
  </div>
  <div id="Sitename">Content for  id "Sitename" Goes Here</div>

  <div id="tablecenter">
    <h1><img src="images/LgWhitepic.jpg" width="410" height="242" /></h1>
  </div>
  <div id="tableright">
    <p align="center"><img src="images/SmWhitepic.jpg" alt="" width="118" height="87"  /></p>
    <p>&nbsp;</p>
    <p align="center"><img src="images/SmWhitepic.jpg" alt="" width="118" height="87" /></p>
    <p>&nbsp;</p>
    <p align="center"><img src="images/SmWhitepic.jpg" alt="" width="118" height="87" /></p>
  </div>
</div>

Paragraphs are not suitable containers for images. You should be using a styled unordered list. — Diodeus - James MacFarlane, Jan 10 '13 at 15:05
the paragraph tags were added to created extra space. these are not the issue though because I had then in before I added the Sitename div. Whatever I did was when adding that last div but I have been staring at this for far to long and cannot figure out what happened at that point. — lightning, Jan 10 '13 at 15:11

score 0 · Accepted Answer · answered Jan 10 '13 at 15:11

0

You could nest <div id="Sitename">Content for id "Sitename" Goes Here</div> within <div id="tablecenter"> but remove the float: left; and let it display: block;

answered Jan 10 '13 at 15:11

maceyj2

666
1
5
7

OMG I am such an idiot. Thank you maceyj2. that worked perfect. If I would just stop and take a break I would notice things like this! – lightning Jan 10 '13 at 15:17
i did leave the float left in though and it works that way too. – lightning Jan 10 '13 at 15:18
happy to help! but you should remove the float if its not needed - optimize your CSS! – maceyj2 Jan 10 '13 at 15:43

score 0 · Answer 2 · answered Jan 10 '13 at 15:14

0

Because <div id="tableright"> is AFTER <div id="tablecenter"> it starts from the same position from top. Like waterfall. Switch them.

answered Jan 10 '13 at 15:14

primetwig

465
3
12

Another Div Alignment issue

2 Answers2