Div tags not butting up togther?

Martin Bean · Martin Bean

every thing was going fine untill i wanted to spilt the content part of the
page into 2 div tags so that the left side could be sub links and the right
side could be the content but for some reason they just wont but togther?

HTML page 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=iso-8859-1" />
<title>War Horse Trading Post - Cataloge</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div align="center">

<div id="Banner">
<img src="Images/banner.jpg" alt="War Horse Trading Post banner">
</div>

<div id="Links">
<a href="Index.html">Home</a> |
<a href="FAQ.html">FAQ</a> |
<a href="Catalogue.html">Catalogue</a> |
<a href="Orders.html">Orders</a> |
<a href="Contact.html">Contact</a>
</div>

<div id="SubLinks"></div>

<div id="Content">
<br></br><br>
</br><br></br>
</div>

<div id="Footer">
Copyright © 2005, Warhorse trading post. All Rights Reserved <br>
Created by: <a href="http://www.funnycrew.co.uk/im" target="_blank">Inspired
Motive</a>
</div>

</div>

</body>
</html>

Styles.css code

/* CSS Document */

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;

}
a:hover {
text-decoration: underline;
}
#Links {
height: 15px;
width: 760px;
background-color: #CCCCCC;
clear: both;
}
#Content {
width: 610px;
clear: none;
float: right;
height: 300px;

}
#Footer {
height: 15px;
clear: both;
font-size: 9px;
width: 760px;
background-color: #BFBF9D;
}
#Banner {
height: 100px;
width: 760px;
}
#SubLinks {
background-color: #CCCCCC;
float: left;
width: 150px;
height: 300px;
clear: none;
top: 0px;
}
any one have any ideas?

thanks martin

Murray *TMM* · Murray *TMM*

#Content {
width: 610px;
/* clear: none; */
float: left;
height: 300px;

}

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"Martin Bean" <webforumsuser@macromedia.com> wrote in message
news:dlg3to$rso$1@forums.macromedia.com...

> every thing was going fine untill i wanted to spilt the content part of
> the
> page into 2 div tags so that the left side could be sub links and the
> right
> side could be the content but for some reason they just wont but togther?
>
> HTML page 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=iso-8859-1" />
> <title>War Horse Trading Post - Cataloge</title>
> <link href="styles.css" rel="stylesheet" type="text/css" />
> </head>
>
> <body>
>
> <div align="center">
>
> <div id="Banner">
> <img src="Images/banner.jpg" alt="War Horse Trading Post banner">
> </div>
>
> <div id="Links">
> <a href="Index.html">Home</a> |
> <a href="FAQ.html">FAQ</a> |
> <a href="Catalogue.html">Catalogue</a> |
> <a href="Orders.html">Orders</a> |
> <a href="Contact.html">Contact</a>
> </div>
>
> <div id="SubLinks"></div>
>
> <div id="Content">
> <br></br><br>
> </br><br></br>
> </div>
>
> <div id="Footer">
> Copyright © 2005, Warhorse trading post. All Rights Reserved <br>
> Created by: <a href="http://www.funnycrew.co.uk/im"
> target="_blank">Inspired
> Motive</a>
> </div>
>
> </div>
>
> </body>
> </html>
>
> Styles.css code
>
> /* CSS Document */
>
> body{
> font-family: Arial,sans-serif;
> color: #333333;
> line-height: 1.166;
> margin: 0px;
> padding: 0px;
> }
>
> a:link, a:visited, a:hover {
> color: #006699;
> text-decoration: none;
>
> }
> a:hover {
> text-decoration: underline;
> }
> #Links {
> height: 15px;
> width: 760px;
> background-color: #CCCCCC;
> clear: both;
> }
> #Content {
> width: 610px;
> clear: none;
> float: right;
> height: 300px;
>
> }
> #Footer {
> height: 15px;
> clear: both;
> font-size: 9px;
> width: 760px;
> background-color: #BFBF9D;
> }
> #Banner {
> height: 100px;
> width: 760px;
> }
> #SubLinks {
> background-color: #CCCCCC;
> float: left;
> width: 150px;
> height: 300px;
> clear: none;
> top: 0px;
> }
> any one have any ideas?
>
> thanks martin
>

Martin Bean · Martin Bean

didnt work :( im using dreamweaver 8

Murray *TMM* · Murray *TMM*

Yeah - it will. Show me your page, please.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:dlg58b$cf$1@forums.macromedia.com...

> #Content {
> width: 610px;
> /* clear: none; */
> float: left;
> height: 300px;
>
> }
>
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
> [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
> [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
> ==================
>
>
> "Martin Bean" <webforumsuser@macromedia.com> wrote in message
> news:dlg3to$rso$1@forums.macromedia.com...

>> every thing was going fine untill i wanted to spilt the content part of
>> the
>> page into 2 div tags so that the left side could be sub links and the
>> right
>> side could be the content but for some reason they just wont but togther?
>>
>> HTML page 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=iso-8859-1"
>> />
>> <title>War Horse Trading Post - Cataloge</title>
>> <link href="styles.css" rel="stylesheet" type="text/css" />
>> </head>
>>
>> <body>
>>
>> <div align="center">
>>
>> <div id="Banner">
>> <img src="Images/banner.jpg" alt="War Horse Trading Post banner">
>> </div>
>>
>> <div id="Links">
>> <a href="Index.html">Home</a> |
>> <a href="FAQ.html">FAQ</a> |
>> <a href="Catalogue.html">Catalogue</a> |
>> <a href="Orders.html">Orders</a> |
>> <a href="Contact.html">Contact</a>
>> </div>
>>
>> <div id="SubLinks"></div>
>>
>> <div id="Content">
>> <br></br><br>
>> </br><br></br>
>> </div>
>>
>> <div id="Footer">
>> Copyright © 2005, Warhorse trading post. All Rights Reserved <br>
>> Created by: <a href="http://www.funnycrew.co.uk/im"
>> target="_blank">Inspired
>> Motive</a>
>> </div>
>>
>> </div>
>>
>> </body>
>> </html>
>>
>> Styles.css code
>>
>> /* CSS Document */
>>
>> body{
>> font-family: Arial,sans-serif;
>> color: #333333;
>> line-height: 1.166;
>> margin: 0px;
>> padding: 0px;
>> }
>>
>> a:link, a:visited, a:hover {
>> color: #006699;
>> text-decoration: none;
>>
>> }
>> a:hover {
>> text-decoration: underline;
>> }
>> #Links {
>> height: 15px;
>> width: 760px;
>> background-color: #CCCCCC;
>> clear: both;
>> }
>> #Content {
>> width: 610px;
>> clear: none;
>> float: right;
>> height: 300px;
>>
>> }
>> #Footer {
>> height: 15px;
>> clear: both;
>> font-size: 9px;
>> width: 760px;
>> background-color: #BFBF9D;
>> }
>> #Banner {
>> height: 100px;
>> width: 760px;
>> }
>> #SubLinks {
>> background-color: #CCCCCC;
>> float: left;
>> width: 150px;
>> height: 300px;
>> clear: none;
>> top: 0px;
>> }
>> any one have any ideas?
>>
>> thanks martin
>>

>
>

Martin Bean · Martin Bean

this is what the page looks like
[url]http://www.funnycrew.co.uk/War_Horse/Cataloge.html[/url] yes i want the grey bar
butted up underneaf the links that are going across and the content too so it
forms a nice rectangle but as u can see from the link the div tags dont seem to
be working

Murray *TMM* · Murray *TMM*

Be aware that any image with this name -

<img src="Images/banner.jpg" alt="War Horse Trading Post banner">

is at risk of being blocked by Norton, or other aggressive antivirus
applications. I would rename it.

The gap you are seeing is caused by the 'descender space' left on the text
box occupied by any inline element (to make room for the descenders on "g"
or "q" or other characters). You can solve that by making that banner image
display as a block tag, e.g.,

<img src="Images/banner.jpg" alt="War Horse Trading Post banner"
style="display:block;">

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"Martin Bean" <webforumsuser@macromedia.com> wrote in message
news:dlggok$g3a$1@forums.macromedia.com...

> this is what the page looks like
> [url]http://www.funnycrew.co.uk/War_Horse/Cataloge.html[/url] yes i want the grey bar
> butted up underneaf the links that are going across and the content too so
> it
> forms a nice rectangle but as u can see from the link the div tags dont
> seem to
> be working
>

johnrkofonow · johnrkofonow

This is an easy fix. In order to float those two divs to have them side by side
AND have the two of them centered on the page, you need to "wrap" something
around them, which then is centered. You've started this already with the div
align="center" tag. Unfortunately, that's only the beginning and you've just
got to add a few things then make a few allowances for IE/Win. Without setting
a width for a div, it will stretch to be a wide as it can go. In this case, the
entire width of the window. That's why your align="center" isn't going to work.
Feel free to remove that before continuing on. Here you go:

1. Add this line of CSS, preferably right after the body CSS:

div { width: 760px; margin: 0 auto; text-align: left; }

This sets the default width of any div to 760px (which is overridden on all
the divs except for the one without an id or class, aka the centered one). In
order to center a div using CSS, it MUST have a specific width, pixels or
percentages is your choice. The margin: 0 auto is what actually centers that
div in the window (on good browsers which doesn't include IE, but we'll get to
that.) the 0 measurement is the top and bottom margin and can be changed if you
like, the auto is the left and right measurement. If a good browser sees
something with a specific width, which is narrower than the entire window, and
the left and right margins set to auto, it will split the leftovers between
each side which results in the effect of centering.

I'll cover the text-align: left in a second.

2. IE/Win is not a good browser, so it won't center when you do this. It has
another bug in it that allows for you to still center it in IE/Win with CSS.
Place text-align: center into the body rule of your CSS like so:

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
text-align: center;
}

This incorrectly centers block level elements (like divs, tables, paragraphs,
etc...). Now your site is centered in both IE and others with CSS. What one
second though!? That text-align: center made all the text on the page center
inside of their divs! Well, cowboy, here's your fix, the text-align: left line
in the div CSS will set everything back to the normal left alignment.

But it also makes my #Links and #Footer text left aligned!

Okay then, specific to your design here, just add text-align: center to each
of the #Links and #Footer rules of CSS. No problemo.

Heres the whole bit if you're lost on what I said:

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
text-align: center:
}

div { width: 760px; margin: 0 auto; text-align: left; }

a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;

}
a:hover {
text-decoration: underline;
}
#Links {
height: 15px;
width: 760px;
background-color: #CCCCCC;
clear: both;
text-align: center;
}
#Content {
width: 610px;
clear: none;
float: left;
height: 300px;
background-color: #E8F0E8;
}
#SubLinks {
background-color: #CCCCCC;
float: left;
width: 150px;
height: 300px;
clear: none;
top: 0px;
}
#Footer {
height: 15px;
clear: both;
font-size: 9px;
width: 760px;
background-color: #BFBF9D;
text-align: center;
}
#Banner {
height: 100px;
width: 760px;
}

Steve Kale · Steve Kale

One further question from a newbie that found this post by johnrkofonow very useful: how do you get it to center vertically as well as horizontally in the browser window?

evropa · evropa

im having a similar problem. ive read through the posts but wasnt able to
figure it out..
[url]http://evropa.bravehost.com/index2.html[/url]

im trying to get the blue to line up with the white "latest additions"

css:
[url]http://evropa.bravehost.com/styles.css[/url]

the two divs are "additions1" and "additions2"

johnrkofonow · johnrkofonow

Steve Kale, vertical centering is not built into CSS. There is a way to do it
with weird CSS trickery, but it's not perfect.
[url]http://vc351.johnrkofonow.com/vc351_project02/version03.html[/url]. I can't even
really remember how I did it other than it requires a specific height be
applied to the main div, and then the top margins of the div is something like
negative half of the height and the top margin of the body is 50% or something.
I just played with it until it kinda worked. Problem is, resize your browser
window so it's small and you'll see that the content disappears outside of the
browser window. You can use tables to center align vertically, but I don't go
near them for layout stuff any more and you're own your own figuring that out.

evropa, you're html and css is set up well to do this. You're going to need to
"float" the divs. This is how they will show up next to each other.

You're going to need to tell the additions1 and additions2 divs both to float:
left;. This will tell each of those two divs to go as far left as they can and
allow whatever follows them to come up on their right side. I also suggest
always adding display: block to anything you're going to float as it seems to
solve some browser compatibilities I've had. I can't remember which browsers, I
just do it out of habit now.

I tested this on your page with the Web Developer extension for Firefox ( a
must for any coder) and it's working. You'll notice though that the
"hmmmmmmmmm" text and "dcdvfvfdvdvdv" text seem to have their top margins
messed up when you do that. That's because their divs are trying to come up on
the right side of the additions2 div which you floated left. To keep them from
having to do that, tell the "contenttop" div to clear: both;. That will
instruct that div, which is immediately after the additions2 div to not be
brought up next to any div which has been floated before it. Everything after
that div with the clear: both will also be put back into it original place.

Div tags not butting up togther?

Thread Tools

Display

Div tags not butting up togther?

Similar Questions and Discussions

CF 8 Tags

nav not butting up to footer

How to treat template tags as comment tags?

My Own Tags

Using ParseChildren attribute to load child tags - VS removes tags

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Re: Div tags not butting up togther?

Posting Permissions