Member Avatar for AndreRet

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...

DivTags_Align.png 62.12 KB
  • 3 Contributors
  • 9 Replies
  • 255 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by RoyalElite96
Member Avatar for pixelsoul

Show your mark up with this, the CSS doesn't mean much with out it.

Member Avatar for AndreRet

I'm not sure what you mean -

Show your mark up with this

With what?

Member Avatar for pixelsoul

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.

Member Avatar for AndreRet

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 because: n/a
Member Avatar for pixelsoul

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>
commented: Thanks! +6
Member Avatar for pixelsoul

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.

Member Avatar for AndreRet

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.;)

Member Avatar for pixelsoul

lol, I know who to come to when I have a question about vb6 :)

Cheers!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.