0

I have just started designing, stuck on this.

I have a few div tags that I am trying to line next to each other with a 10px spacing between them. I just can't seem to get it to align though. They are contained in another tag (center_container) with the following code in my .css -

#container {
	width:968px;
	background:#FFF;
	margin:0 auto;
	padding-left:10px;
	padding-right:10px;
	overflow:hidden;
}

	
#container {
	background-attachment: fixed;
	background-image: url(../Images/Backgrounds/Main-bg.png);
	background-repeat: repeat;
	background-position: center center;
}

#left_menu {
	width:180px;
	float: left;
	margin-top:10px;
	margin-bottom:10px;
	height:750px;
}

##center_container {
	width:652px;
	float: left;
	margin-top:10px;
	margin-bottom:10px;
	height:750px;
}

#left_menu, #center_container { 
	margin-left: 10px;
}

#Picture1, #Picture2, #Picture3, #Picture4, #Picture5 {
	width:130px;
	height:130px;
	float:left;
	margin-left:10px;
	position:relative;
	
}

I had the code without the margin-left and position in different states as well, with the same results. Anyone know how to get this aligned?

The pic below (attachment) is what loads in chrome, the 10px spacing is correct, but they get stuck below each other...

Attachments DivTags_Align.png 62.12 KB
3
Contributors
9
Replies
11
Views
7 Years
Discussion Span
Last Post by RoyalElite96
0

We need to see the html code as well. Your CSS doesn't show us how the page is structured and the divs them selves with the id's on them.

0

Ah, got it. Sorry, VERY new to this, picking up slowly though, thanks.:)

Code follows, from line 41 is where the code is suppose to start spacing next to each other... -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid 4 Anything, Yes, Really, Anything!</title>
<link href="styles/bid4anything.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="styles/Logo_menu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="Logo"><img src="Images/Logo/Logo.png" width="968" height="150" alt="Bid 4 anything Logo" />
    <ul id="Logo_menu" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </div>
  <div id="left_menu"><img src="Images/Left Menu/LeftMenuList.png" width="157" height="751" alt="Left Menu List" /></div>
  <div id="center_container">

'##### This is where the tags are suppose to start lining...
/*.....*/
    <div id="Picture1">
      <p><img src="Images/Categories/antique.png" width="130" height="174" alt="Antiques and Collectable Items" /></p>
      <div id="Picture2">Content for  id "Picture2" Goes Here
        <div id="Picture3">Content for  id "Picture3" Goes Here
          <div id="Picture4">Content for  id "Picture4" Goes Here
            <div id="Picture5">Content for  id "Picture5" Goes Here
              <div id="Picture6">Content for  id "Picture6" Goes Here
                <div id="Picture7">Content for  id "Picture7" Goes Here
                  <div id="Picture8">Content for  id "Picture8" Goes Here
                    <div id="Picture9">Content for  id "Picture9" Goes Here
                      <div id="Picture10">Content for  id "Picture10" Goes Here
                        <div id="Picture11">Content for  id "Picture11" Goes Here
                          <div id="Picture12">Content for  id "Picture12" Goes Here
                            <div id="Picture13">Content for  id "Picture13" Goes Here
                              <div id="Picture14">Content for  id "Picture14" Goes Here
                                <div id="Picture15">Content for  id "Picture15" Goes Here
                                  <div id="Picture16">Content for  id "Picture16" Goes Here
                                    <div id="Picture17">Content for  id "Picture17" Goes Here
                                      <div id="Picture18">Content for  id "Picture18" Goes Here
                                        <div id="Picture19">Content for  id "Picture19" Goes Here
                                          <div id="Picture20">Content for  id "Picture20" Goes Here
                                            <div id="Picture21">Content for  id "Picture21" Goes Here
                                              <div id="Picture22">Content for  id "Picture22" Goes Here
                                                <div id="Picture23">Content for  id "Picture23" Goes Here
                                                  <div id="Picture24">Content for  id "Picture24" Goes Here
                                                    <div id="Picture25">Content for  id "Picture25" Goes Here
                                                      <div id="Picture26">Content for  id "Picture26" Goes Here
                                                        <div id="Picture27">Content for  id "Picture27" Goes Here
                                                          <div id="Picture28">Content for  id "Picture28" Goes Here
                                                            <div id="Picture29">Content for  id "Picture29" Goes Here
                                                              <div id="Picture30">Content for  id "Picture30" Goes Here
                                                                <div id="Picture31">Content for  id "Picture31" Goes Here</div>
                                                              </div>
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer_menu"><img src="Images/Logo/Footer.png" width="968" height="110" alt="Footer Menu Holder" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("Logo_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Edited by AndreRet: n/a

2

No worries. We all are beginners at some point.

Now first I would like to point out in your markup the <div> structure you have in there is insane. I am not really sure what is happening there :)

Also, rather than using a div for everything try an unordered list <ul> for something like image thumbnails. It looks a lot cleaner that way.

In your CSS you had a ID with "##" in front of it when it only need "#" for it to work. Also remember, that if more than one element on a page has the same style or you will use the same style more than once on a page you want to use a class rather than an id. Below you will see an example I did very quickly.

<style>
#container {
	width:968px;
	background:#FFF;
	margin:0 auto;
	padding-left:10px;
	padding-right:10px;
}

	
#container {
	background-attachment: fixed;
	background-image: url(../Images/Backgrounds/Main-bg.png);
	background-repeat: repeat;
	background-position: center center;
}

#left_menu {
	width:180px;
	float: left;
	margin-top:10px;
	margin-bottom:10px;
	height:750px;
}

#center_container {
	width:652px;
	float: left;
	margin-top:10px;
	margin-bottom:10px;
	height:750px;
}

#left_menu, #center_container { 
	margin-left: 10px;
}

#Picture1{
	float:left;
	margin-left:10px;
	position:relative;
}

.lineup {display:inline;width:130px;height:130px;float:left;border:solid 1px;margin:3px;}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid 4 Anything, Yes, Really, Anything!</title>
<link href="styles/bid4anything.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="styles/Logo_menu.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
  <div id="Logo"><img src="Images/Logo/Logo.png" width="968" height="150" alt="Bid 4 anything Logo" />
    <ul id="Logo_menu" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1.1</a></li>
          <li><a href="#">Item 1.2</a></li>
          <li><a href="#">Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
        <ul>
          <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
          </li>
          <li><a href="#">Item 3.2</a></li>
          <li><a href="#">Item 3.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </div>
  <div id="left_menu"><img src="Images/Left Menu/LeftMenuList.png" width="157" height="751" alt="Left Menu List" /></div>
  <div id="center_container">

  
    <div id="Picture1">
      <p><img src="Images/Categories/antique.png" width="130" height="174" alt="Antiques and Collectable Items" /></p>

		<ul>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
			<li class="lineup">Image Here</li>
		</ul>
	  
    </div>
	
  </div>
  <div id="footer_menu"><img src="Images/Logo/Footer.png" width="968" height="110" alt="Footer Menu Holder" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("Logo_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Votes + Comments
Thanks!
0

Oh... also you don't need to put any style information on your div tags either. Use your external CSS for all the styling of the page avoiding any inline styling. You don't need to put your image tags in a paragraph or div tag either, they will work fine with out doing that.

0

I don't know if you had a look at my profile, I'm basically covering vb6 on my own. There I just have to glance at the code to see where the OP went wrong.

How could I be so stupid to miss the double "#".;)

Thanks for the advice as well on the list, it took half the code away. I'm marking this as solved with some kudos, thanks. If I get stuck I'll open a new thread.

Funny, I'm working off a tutorial from DW, step by step, obviously they did not cover the easier routes to the design.;)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.