8 Replies - 814 Views - Last Post: 25 July 2012 - 04:28 PM

#1 dxverm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 10-July 12

Question about aligning divs for web design

Posted 10 July 2012 - 04:07 PM

Hello all! I am new here and am developing a website that should be pretty straight forward as far as coding goes. But im running into issues seeing as I am old school and used to using html tables and this is my first time trying to code more strictly with html/divs and css. This is the issue im running into: aligning my containers just right. I figure if I post my code someone may just see the problem and know the fix. With out further ado, here is my code, if any other information is needed just let me know and i'll be sure to inform ya! thank you in advance!

Css:

@charset "utf-8";
html, body {
	background-color: #024cb5;
	margin: 0px;
	padding: 0px;
	}
/*------------------BANNER------------------*/
#banner {
	overflow: hidden;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 255px;
	background-color: #024cb5;
	}
/*----------------NAVIGATION----------------*/
#navigation {
	margin: 0 auto;
	width: 100%;
	height: 37px;
	}
#nav-center {
	width: 1100px;
	height: 37px;
	background: url(images/navbar_bg.jpg) repeat-x 0 0;
	}
ul.navmenu {
	float: left;
	position: relative;
	margin: 0 0 0 -32px;
	list-style: none;
	}
ul.navmenu li {
	float: left;
	}
ul.navmenu li a {
	float: left;
	display: block;
	text-decoration: none;
	padding: 10px 18px 7px 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #d0ddf7;
	font-weight: bold;
	}
ul.navmenu li a:hover {
	alignment-adjust: middle;
	float: inherit;
	background: url(images/homebg.jpg) no-repeat 0 0;
	}
/*------------------contentcontainer------------------*/
#main-content {
	float: center;
	width: 1100px;
	height: 100%;
	}
/*------------------left-bar------------------*/
#left-bar {
	margin: 0 auto;
	float: left;
	height: 100%;
	width: 301px;
	}
#menu {
	height: 100%;
	width: 301px;
	background: url(images/navbg.jpg) repeat-y 0 0;
	}
/*------------------CONTENT------------------*/
#content {
	margin: 0 auto;
	float: right;
	width: 799px;
	height: 100%;
	background: url(images/bg.jpg) repeat;
	}
#content-uploads {
	width: 799px;
	height: 120px;
	}
#content-body {
	width: 799px;
	height: 100%;
	}
/*------------------FOOTER------------------*/
#footer {
	vertical-align: bottom;
	margin: 0 auto;
	width: 100%;
	height: 36px;
	}
#footer-center {
	width: 1100px;
	height: 36px;
	background: url(images/footerbg.jpg) repeat-x 0 0;
	}


Html:

<!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>Catchalottafish.com</title>
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head>

<body>


<div id="banner" align="center">
   <img src="images/header.jpg">
</div>

<div id="navigation" align="center">
    <div id="nav-center" align="center">
		  <ul class="navmenu">
			<li><a href="#" title="Homepage">Home</a></li>
  			<li><a href="#" title="About Us">About Us</a></li>
  			<li><a href="#" title="Media">Media</a></li>
  			<li><a href="#" title="Contact Us">Contact Us</a></li>
  			<li><a href="#" title="FAQs">FAQs</a></li>
  			<li><a href="#" title="Links">Links</a></li>
         </ul>
    </div>
</div>

<div id="main-content">

<div id="left-bar" align="left">
<div id="menu">
	<a href="#" title="Game Fish"><img src="images/gamefish.jpg" border="0"></a>
	<a href="#" title="Fishing Trips"><img src="images/fishingtrips.jpg" border="0"></a>
	<a href="#" title="Rates & Pricing"><img src="images/ratespricing.jpg" border="0"></a>
	<a href="#" title="Reservations"><img src="images/reservations.jpg" border="0"></a>

<img src="images/fishingreport.jpg">

<img src="images/sponsors.jpg">

</div>
</div>

<div id="content">
<div id="content-uploads" align="center"></div>

<div id="content-body" align="center"></div>
</div>

</div>

<div id="footer" align="center"> 
<div id="footer-center" align="center"></div>
</div> 

</body>
</html>




my banner, and top navigation bar and footer will center correctly but my main-content area that includes the left nav and right content area stay aligned left? and my footer is directly below my navigation bar and behind my main-content div? any ideas?

Is This A Good Question/Topic? 0
  • +

Replies To: Question about aligning divs for web design

#2 blazexhacker  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 9
  • Joined: 10-July 12

Re: Question about aligning divs for web design

Posted 10 July 2012 - 08:36 PM

try using
padding-left:
and
padding-right:
, as it will move the content area of your page over however many pixels you have set for the width of the left and right navigation divs.
<html>
<body>
<div id="imonthetop" style="top: 0px; width: 100%; posistion: fixed;">Im stuck on the top!</div>
<div id="imontheright" style="float: left; width: 200px; height: 400px;">Im on the left!</div>
<div id="iminthecenter" style="padding-left: 200px; padding-right: 200px; width: 100%">Im in the center</div>
<div id="imontheright" style="float: right; width: 200px; height: 400px;">Im on the right!</div>
<div id="imonthebottom" style="bottom: px; width: 100%; position: fixed;">Im stuck to the bottom!</div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#3 enjoibp3  Icon User is offline

  • New D.I.C Head

Reputation: 14
  • View blog
  • Posts: 48
  • Joined: 02-March 11

Re: Question about aligning divs for web design

Posted 19 July 2012 - 12:20 PM

I noticed 2 things that may fix your problem.

First you have height: 100%; on the #main-content div which is fine, but won't actually take unless you add height: 100%; to html,body style. (that should also fix the footer being behind the content.)

To float the main content to the middle you have float: center, but center isn't actually a property of float. Instead use margin: 0 auto; what that will do is set it so there is not margin top or bottom and make the left and right margin equal effectively floating it to the middle.

Note: Those are fixes to your current code, but I might suggest using a wrapper for all that content with the width set to 1100px and putting all your divs in there then just positioning that to the middle.
Was This Post Helpful? 0
  • +
  • -

#4 el_pancho  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 88
  • Joined: 26-April 12

Re: Question about aligning divs for web design

Posted 19 July 2012 - 04:13 PM

Hi there, its a simple mistake, if you float the main content all divs that are not floating and are positioned outside the floating one, will be underneath the floating ones, to correct this ADD :
clear:both;

to the non-floating div.

and for your main-content div alignment try using
margin: 0 auto;
instead of
float:center;
.

That should be it!
Was This Post Helpful? 0
  • +
  • -

#5 dxverm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 10-July 12

Re: Question about aligning divs for web design

Posted 20 July 2012 - 06:37 PM

thank you for all your help guys, now that i've fixed those issues now im trying to code the content section that would be on the right side, but i cant get the contentbg.jpg to fill the empty space between my nav, left nav, and footer. am i missing something simple here again. here is my updated code:

css:
/*------------------contentcontainer------------------*/
#main-content {
	clear: both;
	margin: 0 auto;
	width: 100%;
	}
/*------------------left-bar------------------*/
#left-bar {
	float: left;
	height: 100%;
	width: 301px;
	background: url(images/navbg.jpg) repeat-y 0 0;
	}
#menu {
	padding: 0px;
	width: 301px;
	height: 
	}
.fishing-report {
	margin-left: 14px;
	width: 280px;
	text-align: left;
	text-decoration: none;
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
	}
.sponsors {
	margin-left: 14px;
	width: 292px;
	}
/*------------------CONTENT------------------*/
#content {
	float: right;
	height: 100%;
	background: url(images/contentbg.jpg) repeat;
	}
.content-uploads {
	}
.content-body {
	}
/*------------------FOOTER------------------*/
#footer {
	clear: both;
	width: 100%;
	height: 36px;
	}
.footer-center {
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 36px;
	background: url(images/footerbg.jpg) repeat-x 0 0;
	}


html:
<!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>Catchalottafish.com</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" /> 
</head>

<body>


<div id="navigation" align="center">
    <div class="nav-center" align="center">
			<a href="#" title="Homepage">Home</a>&nbsp; &nbsp; &nbsp;
  			<a href="#" title="About Us">About Us</a>&nbsp; &nbsp; &nbsp;
			<a href="#" title="The Vessel">The Vessel</a>&nbsp; &nbsp; &nbsp;
  			<a href="#" title="Photo Gallery">Photo Gallery</a>&nbsp; &nbsp; &nbsp;
  			<a href="#" title="Rates & Pricing">Rates & Pricing</a>&nbsp; &nbsp; &nbsp;
			<a href="#" title="Package Deals & Housing">Package Deals & Housing</a>&nbsp; &nbsp; &nbsp; 
			<a href="#" title="Reservations">Reservations</a>&nbsp; &nbsp; &nbsp;
  			<a href="#" title="FAQs">FAQs</a>&nbsp; &nbsp; &nbsp;
    </div>
</div>




<div id="main-content">




<div id="left-bar" align="left">
<div id="menu">

<a href="#" title="Offshore Fishing"><img src="images/offshorefishing.jpg" border="0"></a><a href="#" title="Inshore Fishing"><img src="images/inshorefishing.jpg" border="0"></a><a href="#" title="Offshore Fly Fishing"><img src="images/offshoreflyfishing.jpg" border="0"></a><a href="#" title="Swordfishing"><img src="images/swordfishing.jpg" border="0"></a><a href="#" title="Bahamas Trips"><img src="images/bahamastrips.jpg" border="0"></a><a href="#" title="Tournaments"><img src="images/tournaments.jpg" border="0"></a><a href="#" title="Spearfishing"><img src="images/spearfishing.jpg" border="0"></a><a href="#" title="Fish and Snorkle Packages"><img src="images/fishandsnorkle.jpg" border="0"></a><a href="#" title="Sunset and Eco Tours"><img src="images/sunsetandeco.jpg" border="0"></a><a href="#" title="Party and Sandbar Trips"><img src="images/partyandsandbar.jpg" border="0"></a><a href="#" title="Atlantic Gamefish"><img src="images/atlanticgamefish.jpg" border="0"></a><a href="#" title="Fishing Calendar"><img src="images/fishingcalendar.jpg" border="0"></a><a href="#" title="Weather Links"><img src="images/weatherlinks.jpg" border="0"></a><a href="#" title="Moon Phases and Tide Links"><img src="images/moonphase.jpg" border="0"></a>

</div>

<br>

<div class="fishing-report" align="left">
<img src="images/fishingreport.png">
<br>
<div align="right">
Tuesday June 23, 2012
<br><br></div>
<div align="left">
Hey everyone, and welcome back to this week's report!  This week in Islamorada we having a great time as we have got the best of winter, spring, and summer going on right in our back yard!  Sailfish, Tunas, Mahi, AJ's, Cobia, Wahoo, Kingfish, Jacks....you name it!  It is here!  Lots of fish put up on the dock, and lot's of smiling faces!  The reef is on fire as well, with the Yellowtails in full spawn, and lots of bottom feeders like Muttons and Groupers mixed in.  This has been a great season, a little unpredictable with the unseasonably warm weather, but very productive.  A genuine mixed bag of sorts, but a lot of fun.  The box looks like a rainbow at the end of the day with all the different colors from the variety of fish.  Makes for a really fun day, and a great experience for new customers especially.  Give me a call and lets talk about how I can design a trip of a lifetime for you and your family! 
<br><br><br>
Tight Lines,
<br><br>
Capt. James
</div>
</div>

<br><br>

<div class="sponsors" align="left">
<img src="images/sponsors.png">
<br>
<br>
	<a href="#" title="Costa Del Mar"><img src="images/sponsors/costalogo.gif" border="0"></a><br><br>
	<a href="#" title="Florida Smortsman"><img src="images/sponsors/floridasportsmanlogo.gif" border="0"></a><br><br>
	<a href="#" title="Pelagic"><img src="images/sponsors/PELAGIC-LOGO.gif" border="0"></a><br><br>
	<a href="#" title="Andros BoatWorks"><img src="images/sponsors/andros.jpg" border="0"></a><br><br>
	<a href="#" title="Krystal"><img src="images/sponsors/kristal.png" border="0"></a><br><br><br>
</div>

</div>



<div id="content" align="right>
<div class="content-uploads" align="left">
<img src="images/latestuploads.png">
</div>

<div class="content-body" align="center"></div>

<div class="content-testimonials" align="center"></div>

</div>



</div>



<div id="footer" align="center">
<div class="footer-center" align="center"></div>
</div>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#6 Lazy Vulpes  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 60
  • Joined: 02-May 12

Re: Question about aligning divs for web design

Posted 20 July 2012 - 08:16 PM

Try setting a height in #main-content and #content.

This post has been edited by Lazy Vulpes: 20 July 2012 - 08:17 PM

Was This Post Helpful? 0
  • +
  • -

#7 dxverm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 10-July 12

Re: Question about aligning divs for web design

Posted 25 July 2012 - 10:51 AM

I have set the height in both #main-content and #content to 100%, but still a white bg appears, i know my images are linked correctly, ill upload to a server in a few minutes for a live look.
Was This Post Helpful? 0
  • +
  • -

#8 dxverm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 10-July 12

Re: Question about aligning divs for web design

Posted 25 July 2012 - 12:35 PM

live version is visible at http://oblivion.zymi...fish/index.html
Was This Post Helpful? 0
  • +
  • -

#9 dxverm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 10-July 12

Re: Question about aligning divs for web design

Posted 25 July 2012 - 04:28 PM

and i cant get padding to work for #content-uploads ???
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1