Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 12-23-2009, 06:54 PM   #1
In Runtime
 
hockeygoalie5's Avatar
 
Join Date: Dec 2009
Location: United States
Posts: 297
Default Trouble with divs and floats.

Okay, here's my deal.

I have two div tags for two columns that should be side by side. The second column always drops to the line below the first. I know the solution to this is adding float:left; to the CSS but when I do this (add it to both columns) the divs are knocked off of another div. This div is the background for them.

HELP!
__________________

hockeygoalie5 is offline   Reply With Quote
Old 12-24-2009, 03:54 PM   #2
Daemon Poster
 
wmorri's Avatar
 
Join Date: May 2007
Posts: 1,066
Send a message via AIM to wmorri
Default Re: Trouble with divs and floats.

Hi,

Can you post some of your HTML and CSS so that we can take a look and figure out how to help you.

On a side note your quote comes from the song "Hands Held High" by Linkin Park.

Cheers!
__________________

__________________
LEARN BY DOING NOT BY FOLLOWING DIRECTIONS!
Linux Forever!

I thought you were a hispanic/african american? Who is the white guy in the pictures?
wmorri is offline   Reply With Quote
Old 12-27-2009, 09:22 AM   #3
In Runtime
 
hockeygoalie5's Avatar
 
Join Date: Dec 2009
Location: United States
Posts: 297
Default Re: Trouble with divs and floats.

Okay, it is col2 and bodymid that's acting up. I know how to fix the dropping down one level is to add float:left, but when I do that the bodymid no longer covers it.

Here's my CSS:
Code:
@charset "utf-8";
/* CSS Document */

.header {
    width:729px;
    height:157px;
    background-image:url(images/header.png);
}
.bodymid {
    width:729px;
    background-image:url(images/bodymid.png);
}
.bodybot {
    width:729px;
    background-image:url(images/bodybot.png);
    height:6px;
}
.col1 {
    margin-left:11px;
    width:202px;
}
.smalltop {
    background-image:url(images/smalltop.png);
    width:202px;
    height:17px;
}
.smallmid {
    background-image:url(images/smallmid.png);
    width:202px;
}
.smallbot {
    width:202px;
    background-image:url(images/smallbot.png);
    height:14px;
}
.space {
    margin-bottom:7px;
}
#col2 {
    width:428px;
    margin-right:39px;
    margin-left:39px;
}
.contenttop {
    background-image:url(images/contenttop.png);
    width:428px;
    height:17px;
}
.contentmid {
    background-image:url(images/contentmid.png);
    width:428px;
}
.contentbot {
    background-image:url(images/contentbot.png);
    width:428px;
    height:14px;
}
.footer {
    margin-top:14px;
    width:663px;
    margin-left:17px;
    margin-right:39px;
}
.footertop {
    background-image:url(images/footertop.png);
    width:663px;
    height:17px;
}
.footermid {
    background-image:url(images/footermid.png);
    width:663px;
}
.footerbot {
    background-image:url(images/footerbot.png);
    width:663px;
    height:15px;
}
#topspace {
    height:18px;
    width:729px;
}
#bottomspace {
    height:14px;
    width:729px;
}
.navbar {
    margin-left:12px;
    margin-right:9px;
    width:707px;
    height:17px;
    color:#C90;
}
.headerspace {
    height:5px;
    width:707px;
}
a:link {
     color:#F90;
    text-decoration:none;
}
a:active {
    color:#F90;
    text-decoration:none;
}
a:visited {
    color:#F90;
    text-decoration:none;
}
a:hover {
    color:#C60;
    text-decoration:none;
}
HTML:
Code:
<!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>HabbPortal &raquo; The Final Frontier</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body background="images/bg.gif">
<table align="center" width="729px">
<td>
<div class="header">
<div class="headerspace"></div>
<div class="navbar"><a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a></div>
</div>
<div class="bodymid">
<div id="topspace"></div>
<div class="col1">
<div class="smalltop"></div>
<div class="smallmid">&nbsp;</div>
<div class="smallbot"></div>
<div class="space"></div>
<div class="smalltop"></div>
<div class="smallmid">&nbsp;</div>
<div class="smallbot"></div>
</div>
<div id="col2">
<div class="contenttop"></div>
<div class="contentmid">&nbsp;</div>
<div class="contentbot"></div>
</div>
<div class="footer">
<div class="footertop"></div>
<div class="footermid">&nbsp;</div>
<div class="footerbot"></div>
<div  id="bottomspace"></div>
</div>
</div>
<div class="bodybot"></div>
</td>
</table>
</body>
</html>
I know my quote comes from that song, it's just unknown is more mysterious.
hockeygoalie5 is offline   Reply With Quote
Old 12-29-2009, 11:08 AM   #4
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: Trouble with divs and floats.

A couple of things here:
1.) You started off making the page valid, so you should keep with that.
1.a) divs are not valid within a table cell
2.) That is a lot of divs, and this will lead to many bad things. Nameley: a nightmare to maintain and make cross browser compatible.
3.) HTML should be semantic. In other words, it should "describe" the content it contains. Many divs used simply for layout is not a good practice. Instead create html elements for description of content, not for design. Using css you can make any element look however you want it to.
4.) With that in mind, tables are used to display "tabular" content, like an excel spreadsheet, not for layout, so ex the tables here.

With these things in mind, it is difficult for me to re-produce your problem because i'm missing your background image and i'm not too sure what you're visually trying to accomplish, but here goes:

1.) your whole document should be within (ideally) a single div. This represents a "division" of a page.
give it say a class of mainDiv

Understanding the css block model is key here, do a web search for more information on the css block model.

div elements are block-level. Meaning that they have a height that conforms to content, and a width that is the maximum allowable with of the container. In the case of "mainDiv" this container is the page.
You'll probably want the content to size for the screen resolution, but not too small or too big.
Here is an example of the css for mainDiv

Code:
#mainDiv
{
  margin: 0px auto; /* center in the page */
  width: 95%;
  max-width: 1280px;
  min-width: 1024px; /* no smaller than 1024 or your floated elements will jump */
  padding: 1px;
}
display: block; is not necessary because it is inherent in div.

I see no reason for there to be a header div at all
instead form your main navigation like this:
Code:
<span id="header">
 <ul id="mainNav">
  <li><a href="#" target="_self">Link</a></li>
  <li><a href="#" target="_self">Link</a></li>
  <li><a href="#" target="_self">Link</a></li>
 </ul>
</span>
The css for this might look like so:
Code:
#header
{
  display: block; /* not inherent in span */
  width: 98%;
  max-width: 1024px;
  min-width: 960px;
  margin: 0px auto;
  text-align: center;
}
#mainNav
{
  display: block;
  margin: 0px auto;
  width: 98%;
  list-style-type: none;
}
#mainNav LI
{
  display: block;
  width: 120px;
  float: left;
  list-style-type: none;
  text-indent: 0px;
  padding: 0px;
  margin: 0px;
}
As far as the body goes
a single div for the body should be sufficient.
Code:
<div id="bodyMid">
  <div id="col1">
  </div>
  <div id="col2">
  </div>
</div>
Code:
#col1
{
  float: left;
  margin: 3px 3px 3px 1px;
  clear: none;
  max-width: 300px;
  display: block;
  width: 50%;
  border: solid 1px #000000;
}
#col2
{
  float: left;
  margin: 3px 1px 3px 3px;
  clear: none;
  max-width: 500px;
  display: block;
  width: 50%;
  border: solid 1px #000000;
}
That should be enough to get you going.

I didn't test any of that because I'm at work, but in my head it looks good

important css properties when floating:
clear -- this value specifies whether it should attempt to be placed on it's own line. Possible values are: none, both, right, left;
none says to not clear either side (place things next to eachother if possible) and both clears both sides.

height: !!!! extremely important for floated elements

When you float an element, you are taking it out of the box model.
Box Model info

The other important model for floating is the visual reference model:
Visual Reference Model

The second one helps to explain what I mean about float but what essentially I'm saying for your design is this:

Floated elements are taken out of the box model. When this happens, the height of the container becomes smaller if it isn't specified.
Quote:
but when I do that the bodymid no longer covers it.
Here is why:


Lets say you have two nested divs:
<div>
<div>
This is my inner div with content in it. The content will cause the div's height to grow based on how much content I put in it. This will also cause my container div's height to grow.
</div>
</div>

the main div's height will change with the inner div's height.

Now, if you float the inner div the main div's height will NO LONGER be affected by the inner div's content. It has been taken out of the "box model" in a sense.

to change this behavior, a height must be set manually on the parent div.
It is also important to set the height of the inner div. Let the browser interpret NOTHING!

Sorry it is a bit long winded. Hope this helps and doesn't make it more complicated for you.

If you could put the website up for everyone to see it might make it easier.
__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 12-29-2009, 11:14 AM   #5
In Runtime
 
hockeygoalie5's Avatar
 
Join Date: Dec 2009
Location: United States
Posts: 297
Default Re: Trouble with divs and floats.

Thanks, big help, the header has a whole image to it though. The div header goes on top of bodymid which goes behind the boxes, it isn't the background for everything. Then the footer is the bottom of the bodymid. Thanks again for you're help! You could find this page here.

EDIT: I didn't notice before but there is no height set because the height is dynamic, it expands/contrasts depending on how much content is there.
hockeygoalie5 is offline   Reply With Quote
Old 12-29-2009, 11:33 AM   #6
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: Trouble with divs and floats.

That helps. I'll take a look at it and I'll be have a solution for you tonight.
__________________

__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 05:05 PM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0