Client Side Things
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Codewalkers Forums > Other Technologies > Client Side Things
Reload this Page

I can't properly float my DIVs :(

Discuss I can't properly float my DIVs :( in the Client Side Things forum on Codewalkers.
I can't properly float my DIVs :( Here is a place to talk and ask questions about HTML, CSS, Javascript, and other client side technologies.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Codewalkers Forums Sponsor:
  #1  
Old December 8th, 2004, 08:27 AM
r_palkovic r_palkovic is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: San Diego, CA USA
Posts: 129 r_palkovic User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
Send a message via ICQ to r_palkovic Send a message via AIM to r_palkovic Send a message via Yahoo to r_palkovic
I can't properly float my DIVs :(
I can never seem to get my div alignment to work properly. I have a page that consists of a container, a menu on the left, and supposed to have a content div on the right.

Problem is, if i float the content div left, it displays properly but aligned to the left margin of the main div instead of to the right margin of the nav div.

If I display:inline, it appears the way it currently does here: http://www.despectare.com/cece/

I need the content div to display to the right of the nav div, and span the rest of the width of the main div.

Thanks in advance!

Notes:
1) My CSS and HTML are W3C Certified at time of posting
2) IE doesn't support transparent PNGs, so I'm going to have to come up w/ another way to do the logo.



------style.css------
body{
font-family: arial, times new roman, sans serif;
font-size: 10px;
background-color: #000000;
color: #ffffff;}

.main{
margin: 10px;
width: 700px;
border: 2px solid #aa00aa;
height: 450px;
padding: 0px;}

.nav{
margin-left: 10px;
margin-bottom: 5px;
font-size: 12px;
font-weight: bold;
float:left;
clear: both;
width:100px;}

.navlight{
margin-left: 10px;
margin-bottom: 5px;
font-size: 12px;
font-weight: bold;
float:left;
clear: both;
width:100px;
background-color: #440044;}

.navitem{
margin-left: 10px;
font-weight: normal;
background-color: #000000;}

.highlight{
margin-left: 10px;
background-color: #440044;
font-weight: normal;}

.photos{
border: 1px solid white;
display: inline;}


-----index.php-----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Cece Cantón: Digital Photographer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://www.despectare.com/cece/style.css">
</head>
<body>
<div class="main"> <img class="logo" src="http://www.despectare.com/cece/images/logo.png">
<div class="left">
<div class="nav">Portfolio
<div class="navitem" onMouseOver="this.className='highlight'" onMouseOut="this.className='navitem'">Portraits</div>
<div class="navitem" onMouseOver="this.className='highlight'" onMouseOut="this.className='navitem'">Industrial</div>
<div class="navitem" onMouseOver="this.className='highlight'" onMouseOut="this.className='navitem'">Fashion</div>
<div class="navitem" onMouseOver="this.className='highlight'" onMouseOut="this.className='navitem'">Action</div>
<div class="navitem" onMouseOver="this.className='highlight'" onMouseOut="this.className='navitem'">Comissions</div>
</div>
<div class="nav">About Cece</div>
<div class="nav">Contact</div>
<div class="nav">Directions</div>
<div class="nav">Client Login</div>
</div>
<div class="photos">This isn't displaying properly</div>
</div>
</body>
</html>
Reply With Quote
  #2  
Old December 11th, 2004, 06:11 PM
flyingchair flyingchair is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Hong Kong
Posts: 108 flyingchair User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: I can't properly float my DIVs :(
I know exactly what is wrong with this and I am just quickly making a new HTML file/CSS file for you - be about fifteen minutes
Reply With Quote
  #3  
Old December 11th, 2004, 07:06 PM
flyingchair flyingchair is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: Hong Kong
Posts: 108 flyingchair User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
RE: I can't properly float my DIVs :(
Have a look at this - I think it does what you want. Is a self contained file that will load in your browser off you own machine.

_______________

<!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>
<title>Cece Cantón: Digital Photographer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #eee;
background-color: #000;
margin: 0px;
padding: 20px;
}

/* This gives the purple line and everything else goes inside this. By setting the height it will be the size you want but wil expand if it needs to. I assume you want to run in a 800 x 600 monitor so I am setting the width just less to allow for the scroll bar. */
#container {
width: 790px;
height: 450px;
padding: 0px;
margin: 0px;
border: 2px solid #a0a;
text-align: left;
}

/* Make sure it butts up against the top and left container div border and pushes the two divs below (nav and main). You can change the 3rd margin variable (bottom) to get the distance you want.*/
#header {
margin: 0px 0px 5px 0px;
padding: 0px;
background-color: #333; /* so you can see how it fits in the container - remove to return to black */
}

/* Make sure there are no gaps between the image and the header div border that contains it. You don't need all these but I have learned to be very specific about where things go so I can easily trace errors. */
#header img {
border: 0px;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px 0px 0px 10px; /*move it in from the left side.*/
padding: 0px;
background-color: #333; /* remove later - just for reference */
float: left;
width: 100px;
}

#nav h3 {
font-size: 12px;
font-weight: bold;
margin: 5px 0px 0px 0px;
}

#nav a {
margin-left: 10px;
color: #fff;
text-decoration: none;
font-size: 12px;
width: 100%;
display: block;
}

#nav a:hover {
background-color: #404;
}

/*
Set main against container DIV NOT the floated nav panel.

*/
#main {
margin: 5px 5px 0px 140px;
padding: 5px 0px 0px 0px;
background-color: #333;
}

p {
padding: 0px;
margin: 0px 0px 10px 0px;
}

-->
</style>
</head>

<body>

<!-- Start Big Purple Box -->
<div id="container">

<!-- Start header with logo -->
<div id="header">

<!-- You missed the height, width and alt variables and did not close the IMG tag with the forward slash - you said this validated? -->

<img src="http://www.despectare.com/cece/images/logo.png" width="298" height="102" alt="" />

</div>
<!-- End Header with logo -->

<!-- Start Navigation pane -->
<div id="nav">

<h3>Portfolio</h3>
<a href="">Portraits</a>
<a href="">Industrial</a>
<a href="">Fashion</a>
<a href="">Action</a>
<a href="">Commissions</a>

<h3>About Cece</h3>

<h3>Contact</h3>

<h3>Directions</h3>

<h3>Client Login</h3>

</div>
<!-- End Navigation Pane -->

<!-- Start Main Content Window -->
<div id="main">

<p>So,</p>
<p>What was wrong?</p>
<p>1. Use a container div and map everything to that - it makes things easier</p>
<p>2. Use IDs and then redefine the HTML tags within those divisions - makes for very clean code.</p>
<p>3. Draw boxes and note the paddings and margins. If you give to one you have to take from another. These things add up.</p>
<p>I hope this was some help.</p>
</div>
<!-- End Main Content Window -->

</div>
<!-- End big purple box -->

</body>
</html>
Reply With Quote
  #4  
Old December 12th, 2004, 08:08 AM
r_palkovic r_palkovic is offline
Codewalkers Newbie (0 - 499 posts)
  
Join Date: Apr 2007
Location: San Diego, CA USA
Posts: 129 r_palkovic User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 2
Send a message via ICQ to r_palkovic Send a message via AIM to r_palkovic Send a message via Yahoo to r_palkovic
RE: I can't properly float my DIVs :(
That is EXACTLY what I wanted. You rock!

I'm having issues w/ another page as well, slightly more intense than this one. If you're willing to help - shoot me a private.
Reply With Quote
Reply

Viewing: Codewalkers Forums > Other Technologies > Client Side Things > I can't properly float my DIVs :(

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway. 
Stay green...Green IT