Aligning divs

I am using dreamweaver 8 by macromedia and i am having trouble aligning my divs
left or right. I have selected the relevant divs and tried changing their
properties in the "CSS rule definition" box but when i then click "apply" or
"OK" nothing seems to happen to them. I am also experiencing the same trouble
with setting the margin/padding in the divs. Can anybody help??

Tom Griffiths. wrote:

I am using dreamweaver 8 by macromedia and i am having trouble aligning my divs
left or right. I have selected the relevant divs and tried changing their
properties in the "CSS rule definition" box but when i then click "apply" or
"OK" nothing seems to happen to them. I am also experiencing the same trouble
with setting the margin/padding in the divs. Can anybody help??

We don't know how you're trying to align your <divs> left or right as
you don't say which properties in the css panel you are using.

The only way to align <divs> left or right is to 'float' them left or
right using css.


Why dont you put a simple example page together and upload the page
somewhere and provide a link to it. I'm sure someone will be able to
deduce from the code/css what it is you are doing wrong and point you in
the right direction.

Sorry, yes i am using the float option and selecting left. Nothing seems to
happen then... The code reads:

<div class="style3" id="News">
<h1 class="style6">NEWS:</h1>
<h2 class="style5">DRUM AND BASS ARENA</h2>
<h2 class="style5">18.06.2008 </h2>
<p class="style7">Indecent Records have recently signed a deal with Drum
and Bass Arena for the distribuiton of digital media. This will include mp3
downloads, ringtones, ring back tones and music videos. The first release is
from G-Riff featuring the vocal talent of Hannah K. The track is called
&ldquo;Game&rdquo; and will be available from the Drum and Bass Arena download
store soon.</p>
</div>

I am very new to this so i'm not sure if this gives any clues??

Any help is much appreciated.

Tom Griffiths. wrote:

Sorry, yes i am using the float option and selecting left. Nothing seems to
happen then... The code reads:

div class="style3" id="News"
h1 class="style6">NEWS:</h1
h2 class="style5">DRUM AND BASS ARENA</h2
h2 class="style5">18.06.2008 </h2
p class="style7">Indecent Records have recently signed a deal with Drum
and Bass Arena for the distribuiton of digital media. This will include mp3
downloads, ringtones, ring back tones and music videos. The first release is
from G-Riff featuring the vocal talent of Hannah K. The track is called
&ldquo;Game&rdquo; and will be available from the Drum and Bass Arena download
store soon.</p
/div

I am very new to this so i'm not sure if this gives any clues??

Any help is much appreciated.

The snippet of code you supplied doesn't help much because it just shows

one <div> and no css.

Say you have two <divs> on a page 1.Content and 2.News as below.

<div id="content">This is some content</div>
<div id="news">This is some news</div>


You want 'news' to site beside the 'content' so you would use 'float'
css, like below

#content {
float: left;
width: 300px;
border: 1px solid #000000
}

#news {
float: left;
200px;
border: 1px solid #000000
}

I'm sorry, i still don't understand where that would go in the code. I try to
use the design window as much as possible. This is my code for all my divs,
could u please show me where that would go? That would really help. Thanks.


<div id="container">

<div id="top"><img src="Images/banner.gif" alt="banner" width="780"
height="57"></div>

<div id="nav">
[BULLET]
[LI]Home</li>
[LI]Artists</li>
[LI]Shop</li>
[LI]Merchandise</li>
[LI]Contact</li>
[/BULLET]
</div>

<div id="Latest Release">
<p><img src="Images/sleeve-back.gif" alt="sleeve" width="200"
height="200"></p>
<h1 class="style8">ARTIST: G-RIFF FEAT HANNAH K.</h1>
<h1 class="style8">TITLE: GAME </h1>
</div>


<div class="style3" id="News">
<h1 class="style6">NEWS:</h1>
<h2 class="style5">DRUM AND BASS ARENA</h2>
<h2 class="style5">18.06.2008 </h2>
<p class="style7">Indecent Records have recently signed a deal with Drum
and Bass Arena for the distribuiton of digital media. This will include mp3
downloads, ringtones, ring back tones and music videos. The first release is
from G-Riff featuring the vocal talent of Hannah K. The track is called
&ldquo;Game&rdquo; and will be available from the Drum and Bass Arena download
store soon.</p>
</div>
Content for id "container" Goes Here</div>
<!--This is the close of the container div -->
</body>
</html>

I need to know how your page is set up.

You have a 'container' <div> which holds a 'top', 'nav', 'latest
release' and 'news' <div>

Is it a vertical 3 column design i.e., nav | latest release | news or
what is it?

I need to know what <div> needs to go where.



Tom Griffiths. wrote:

I'm sorry, i still don't understand where that would go in the code. I try to
use the design window as much as possible. This is my code for all my divs,
could u please show me where that would go? That would really help. Thanks.


div id="container"

div id="top"><img src="Images/banner.gif" alt="banner" width="780"
height="57"></div

div id="nav"
[BULLET]
[LI]Home</li
[LI]Artists</li
[LI]Shop</li
[LI]Merchandise</li
[LI]Contact</li
[/BULLET]
/div

div id="Latest Release"
p><img src="Images/sleeve-back.gif" alt="sleeve" width="200"
height="200"></p
h1 class="style8">ARTIST: G-RIFF FEAT HANNAH K.</h1
h1 class="style8">TITLE: GAME </h1
/div


div class="style3" id="News"
h1 class="style6">NEWS:</h1
h2 class="style5">DRUM AND BASS ARENA</h2
h2 class="style5">18.06.2008 </h2
p class="style7">Indecent Records have recently signed a deal with Drum
and Bass Arena for the distribuiton of digital media. This will include mp3
downloads, ringtones, ring back tones and music videos. The first release is
from G-Riff featuring the vocal talent of Hannah K. The track is called
&ldquo;Game&rdquo; and will be available from the Drum and Bass Arena download
store soon.</p
/div
Content for id "container" Goes Here</div
!--This is the close of the container div --
/body
/html

Top is a banner across the top of the page, that's fine where it is. I just
need latest release on the left and news on the right. That's all that is on
this page. And of course the container holds it all. . . Thanks.

Tom Griffiths. wrote:

Top is a banner across the top of the page, that's fine where it is. I just
need latest release on the left and news on the right. That's all that is on
this page. And of course the container holds it all. . . Thanks.

Ok I think I know why you're not getting the effect you need. Don't use
spaces between the 'id' or 'classes' when you name your <divs>.
'Latest Release' should be 'LatestRelease' or use an underscore
'Latest_Release' to join the two together.

Then use some css as below (insert in your css stylesheet) or in the
head section of the page itself, directly before the closing </head> tag.

<style type="text/css">
#container {
width: 760px;
margin: 0 auto;
}
#LatestRelease {
float: left;
width: 380px;
}
#News {
float: left;
width: 380px;
}
</style>

That's brilliant. Thanks so much for your help. It's worked! For future reference, do you know why it didn't work before? Thanks again.

Tom Griffiths. wrote:

That's brilliant. Thanks so much for your help. It's worked! For future reference, do you know why it didn't work before? Thanks again.

I would say, as I said in my last post, you're possibly having issues
because you are naming your <divs> with a space between the words...
Latest Release... instead of... LatestRelease... or the use of an
underscore to join the words.... Latest_Release

Plus you should give a floated container a width