Div tag on each other

Hello, I want to place a div tag on another one, but I dont
want to use position:absolute.
So is that possible?
PS. When I say on each other I mean like layers.

OK - here's a trade secret. Don't tell anyone.
Open that page, and use VIEW | Source. Look at the code. Look
at the
images (you can right click on the images to get
"Properties"). You'll know
exactly how it was done. And I'll give you a hint - there are
no layers
there.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Kolihmu" <[email protected]> wrote in
message
news:g949sr$cjq$[email protected]..
> Okey, but I can show an example on a site that has
performed this.
>
http://www.fiddeandersson.se/index.html
>
> That site has its header as I want.

Similar Messages

CSS divs running into each other 4x3 screens but not widescreen

I am trying to develop a site:
http://www.poweredupgamers.com.
Everything looks great on a widescreen monitor, but when I view it
on older 4x3 monitors the divs run into each other and the spacing
gets all messed up. This occurs regardless of the resolution the
monitors are using.
I thought by setting up margins with % (5% left margin for
left div, etc.) that the divs would change in size to fill the
pages regardless of the resolution the monitor is set at. The divs
do seem to adjust for the resolution, but the monitor format
appears to be a different issue. Do I need to set fixed div
positions or widths to fix this issue? If so, how do I set them to
ensure the page is filled properly (as little blank space as
possible) regardless of the monitor's resolution?
Does it have anything to do with fixed sizes for certain
images inside divs sizes based on % margins?
Thanks very much for any help!

Resolution is not the critical issue. Browser viewport width
is. To make
your decision you need to have some ideas about the following
issues -
1. What is the primary target demographic for this site?
2. What are the browsing habits of that demographic? Do they
normally have
their browser window maximized on the screen?
3. If they usually have their browser maximized, what is the
typical screen
width?
4. If they usually do NOT have their browser maximized, what
is the MINIMUM
screen width in that demographic.
5. How do I want to build the page?
a. Fixed width and left aligned?
b. Fixed width and centering?
c. Flexible to fill whatever width from left to right?
d. Flexible (within limits) and left aligned?
e. Flexible (within limits) and centering?
As you can see, this decision is probably much more complex
than you
thought, and will require that you know quite a bit about
your intended
target visitor and their browsing habits.
If you elect to go with 5a, or 5b, then your decision would
be - 'what is
the mimimum browser width I want to support without
horizontal scrolling?'.
Once you have determined that minimum supported width, all of
your decisions
are made. That's how wide you want your page to be.
If you elect to go with 5c, then you just build your page
within a flexible
container (the simplest example - although an obsolet one -
would be to use
a 100% width table to hold the entire page). Be aware that
pages with
limited text content can look VERY sparse and empty on wide
viewports when
built in this way.
If you elect to go with 5d, or 5e, then you would add this
sophistication to
your decision matrix -
'what is the greatest width I want to allow the page and its
contents to
become?'
In this case, you would use the CSS styles - 'min-width' and
'max-width' on
the primary page container. Just so you'll know, although
these styles are
well supported *now*, earlier versions of IE (and some other
browsers) will
not support them so reliably.
So - which is it? 8)
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"juxtafras" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to develop a site:
http://www.poweredupgamers.com.
Everything
> looks great on a widescreen monitor, but when I view it
on older 4x3
> monitors
> the divs run into each other and the spacing gets all
messed up. This
> occurs
> regardless of the resolution the monitors are using.
>
> I thought by setting up margins with % (5% left margin
for left div, etc.)
> that the divs would change in size to fill the pages
regardless of the
> resolution the monitor is set at. The divs do seem to
adjust for the
> resolution, but the monitor format appears to be a
different issue. Do I
> need
> to set fixed div positions or widths to fix this issue?
If so, how do I
> set
> them to ensure the page is filled properly (as little
blank space as
> possible)
> regardless of the monitor's resolution?
>
> Does it have anything to do with fixed sizes for certain
images inside
> divs
> sizes based on % margins?
>
> Thanks very much for any help!
>

How can I nest tag within each other

Hello,
I am trying to nest a tag within another tag as follows:
<h:selectitem itemValue="<fmt:formatDate value="${d}" pattern="yyyy-MM-dd hh:mm:ss" type="both"/>" itemLabel="Today"/>d is a java.util.Date variable.
Tomcat won't accept that. What am I getting wrong?
Thanks in advance,
Julien.

I don't think taglibs could be other's attribute value.
Try using attributes:
<fmt:formatDate value="${d}" pattern="yyyy-MM-dd hh:mm:ss" type="both" var="anyDate"/>

<h:selectitem itemValue="anyDate" itemLabel="Today"/>

<h:selectitem itemValue="@{anyDate}" itemLabel="Today"/>

Div tag issue

Hi all,
Still fairly green. I have a question about float and divs. I
have 2 divs next to each other, both float left. Both filled with
different colors. As the Div on the left expands VERTICALLY with
copy... I want the one on the right to ALSO expand vertically
WITHOUT adding copy.
I have a footer Div that clears the float but...
Any help would be great.

Position relative is unnecessary in this scenario.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"trymycode" <[email protected]> wrote in
message
news:gmc191$h5$[email protected]..
> Better make a main wrapper div to wrap your left and
right column div, and
> keep
> one background image on main wrapper that is exactly
matching color of
> your
> left and right column ( vertical repeat).
>
> Make a position relative to the inner div ( left and
right column), so
> whenever either left or right column increase main
wrapper height will
> increase, when main wrapper increase you can feel both
side color
> background
> also will grow.
>

Difference Between Insertions for Div Tags

Hi,
What is the difference between "after tag" or "after the start of tag" when inserting a div tag?
Is one included in the same "container" (div tag) and the other one just "follows" after the previous div tag?
Thanks,
njdesigner1944

"after tag" inserts your div after the closing tag of the choosen div. The "after start tag" inserts the new div after the right after the tag you choose and before the close tags.
ie.
Lets say you want to insert a new div called #container with a #mainWrap div already on the page.
"after tag"
<div id="mainWrap"></div>
<div id="container"></div>
as you see it inserts after the closing div tag of #mainWrap
"after start of tag"
<div id="mainWrap"><div id="container"></div></div>
as you see it inserts #container after the start tag and before the close tag of # mainWrap

Can I center 2 divs over each other??

OK, I've built a website completely in Flash and I'm trying
to lay it out with dreamweaver so that when viewed on 800x640
resolution maxed browser window it will fit snug without any
horizontal scrollbar (the SWF's is fit to this standard); and when
viewed on 1024x768 maxed window it will be centered in the window
PLUS have a background on either side (So this background should
not appear in the 800x640 window). If that isn't clear compare
http://www.gamespot.com.
Right so my idea was just to put the SWF in a div and this
background PNG in a div and center them both, while making the PNG
width=100%.
Well that doesn't seem to work. I guess you can't center two
divs over each other?? The only way I can make one overlay on the
other is by giving it an absolute position, but then of course it
isn't centered any more.
Any suggestions?

Well, no, that's not what I meant.
Background images don't do 100%. Using CSS like this -
body { background-repeat:no-repeat;
background-position:center; }
will a) prevent the image from tiling, and b) will place it
in the center of
any size viewport. Is that what you wanted?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Joniba" <[email protected]> wrote in
message
news:en3a6r$jgr$[email protected]..
> Yeah, sorry I'm just learning all this, so now I know
how to (I didn't
> when I
> posted the message). So I guess I could just center the
background image
> with
> no-repeat, and if it's 100% it anyway shouldn't repeat
(?). Is that what
> you
> meant?
>

Trying to make sense of div tags and css

i know that i am a few years late here, but i am looking ot make the migration from using tables and switching over to div tags and css. i have watched a few tutorials on you tube and am trying to understand everything.
please tell me if this is correct. a div tag is basically a table and css is what is used to style that div tag to meet your needs, is this a correct assumption??
if you go to my current site www.tankinz.com you can clearly see that the site is made up of tables, basically these boxes or tables contain a different item or package that a customer can click on and buy. by using div tags and css would each of these boxes, or tables be their own div?
sorry for sounding a bit moronic but i am trying to make sense of all of this.
please help!

Markup (html) contains elements, such as html, body, h1, h2, p, span, div and so forth. Hence a <div>-tag is part of an element; the other part being the </div>-tag.
The element structure of many web sites is basically (using HTML5 element names)
html
     head
     body
          header
          nav
          aside
          article
          footer
These elements can be positioned and styled using style rules (css). Depending on the style rules, the above structure can take on many different styles, without ever touching the markup.
Have a look here for a simple two-column layout using the same structure as above http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Div tag problem

Hi there,
i am creating a website.i seem to be having a bit of trouble with div tag...i think.the navigation bar and the main content seem to be overlapping each other.any ideas?id appreciated any help.
thanks.
<body>
<div id="header">Heading</div>
<div id = "nav">
<ul id="Fyp">
<li><a href="html/Index.html">Home</a> </li>
<li><a href="html/Conventional.html">Conventional Encryption</a></li>
<li><a href="#">Public Key Encryption</a>
    <ul>
<li><a href="html/PublicKey-Confidentiality.html">PublicKey-Confidentiality</a></li>
<li><a href="html/PublicKey-Authentication.html">PublicKey-Authentication</a></li>
<li><a href="html/Public Key-Confidentiality and Authentication.html">Public Key-Confidentiality and Authentication</a></li>
    </ul>
</li>
<li><a href="#">MAC Encryption</a>
    <ul>
<li><a href="#">MAC - Message Authentication</a></li>
     <li><a href="#">Message Authentication and Confidentiality (Plaintext)</a></li>
     <li><a href="#">Message Authentication and Confidentiality(Ciphertext)</a></li>
</ul>
</li>
   <li><a href="#">HASH Encryption</a>
       <ul>
            <li><a href="#">Encryption after Concatenation</a></li>
            <li><a href="#">Encryption before Concatenation</a></li>
              <li><a href="#">Authentication</a></li>
            <li><a href="#">Authentication and Confidentiality</a></li>
           <li><a href="#">Secret Value</a></li>
          <li><a href="#">Secret Value and Encryption</a></li>
     </ul>
    </li>
   <li><a href="#">Self Test</a></li>
</ul>
</div>
<div id="main_content">
<p> </p>
<p>This is the home page for Message Authentication and Digital Signatures.This page will explain the funamental basis of these elements.</p>
<p> </p>
<p><strong>Authentication</strong>:</p>
<p><a name="#Authtentication"></a>
The Authentication service is concerned with assuring that a communication is authentic. Authentication acts as an warning or a alarm signal. The function of the authentication service is to assure the recipient that he message is from the source that it calms to be from.</p>
<p> </p>
<p><strong>Confidentiality</strong>:</p>
<p><a name = "Confidenitiality"></a>
Confidentiality is the protection of transmitted data from passive attacks. This makes sure that the message sent can not be read by anyboby except for the intended recipient .
</p>
<p> </p>
<p><strong>Public Key:</strong></p>
<p><a name = "Public Key"></a>
</p>
<p><strong>Digital Signature:</strong>
<p><a name = "Digital Signature"></a></p>
</p>
<p><strong>Integrity:</strong>
<p><a name = "Integrity"></a> </p>
<p><strong>MAC Function:</strong></p>
<p><a name = "MAC"></a> </p>
<p>A MAC (Message Authentication Code) is a small fixed size block of data that is appended to the message. The technique assumes hat two communicating parties say (Source A and B) share a common secret key(k). When A sends a message to B, it calculates the MAC as a function of the message and the key. The recipient performs the same calculation on the received message using the same key, to generate a new MAC. The received MAC and the calculated MAC are then compared. If the received MAC matches the calculated MAC, then the message is said to be authentic.</p>
</p>
</div>
<div id="footer">
<p>
Footer - all about the designer and contact links go here
</p>
</div>
</body>
</html>

Here ya go.
body {
margin:0px;
padding:0px;
text-align:center;
font-size:1.0em;
font-family:trebuchet ms, tahoma, arial, sans-serif;
#container {
text-align:left;
margin:0px;
width:1270px;
border:1px black solid;
padding: 0px;
#header {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:2.0em;
background-color:white;
color:white;
padding-top:0px;
padding-right:0px;
border-bottom:1px black solid;
#nav {
width:1270px;
#width:1270px;
height:24px;
font-size:0.8em;
background-color:#20548E;
color:black;
border-bottom:1px black solid;
#main_content {
width:1270px;
#width:1022px;
font-size:0.9em;
background-color:white;
color:black;
border-bottom:1px black solid;
#footer {
text-align:center;
width:1270px;
#width:1022px;
height:100px;
font-size:1.0em;
background-color:#20548E;
color:white;
border-bottom:1px black solid;
#Fyp
{ margin: 0;
     padding: 0;
#Fyp li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;
#Fyp li a
{ display: block;
background: #20548E;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 140px;
color: #EAFFED;
white-space: nowrap;
#Fyp li a:hover
{ background: #1A4473;
#Fyp li ul
{ margin: 0;
   padding: 0;
   position: absolute;
   visibility: hidden;
   border-top: 1px solid white;
#Fyp li ul li
{ float: none;
   display: inline;
#Fyp li ul li a
{ width: auto;
   background: #9F1B1B;
#Fyp li ul li a:hover
{ background: #7F1616;

Inserting Images into Dreamweaver through Div Tag

Hi im quite new to Dreamweaver and i've got CS3...I've just
designed and sliced up a website in Photoshop and have started to
compile it together in Dreamweaver using HTML and CSS. I've just
added a Div tag and added images into the page and i've got stuck,
i cant seem to put another image next to one iv already placed
their.
I need help on how to work with Div Tags and applying images
so that i can fix my website like a Jigsaw.
I have provided the code i hav in my HTML so far...

Maybe this will help you -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"DThandi" <[email protected]> wrote in
message
news:gk8anj$4qc$[email protected]..
> Let me show you the before and after images of the site
im working on,
> then
> maybe what im trying to describe can become more
clearer...Your right that
> i do
> need some basic understanding, I actually used to know
the answer to my
> own
> question but since i havn't played around with
Dreamweaver for a while i
> seem
> to have forgotten.
>
> This was the image on Photshop:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/SAMPLE.jpg
>
> This is where I am stuck now:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/stuck.jpg
>
> These are all the small images i have sliced up from
Photshop:
>
http://i187.photobucket.com/albums/x151/ohhchakdeh/Untitled.jpg
>
> As you can see i have trouble coding in HTML. So far i
have been
> following a
> tutorial video showing me how to had images and align
them through Div
> Tag...But now i am trying to put images side by side in
the Navigation
> area and
> on top of and underneath each other. As you can see i
have Home.jpg and
> Home-Scrap.jpg. Home Scrap needs to go under Home and
both of them images
> need
> to go next to image Left-Short.jpg.
>
> Thank You
>

DIV tags disappear when put over swf file background

I am working on a site which has a swf movie as a background
which fills the browser window(SWFobject). When I place DIV tags,
which reference a CSS id and contain swf files as well, over the
top (for absolute positioning, etc.) they disappear when previewed
in a browser . Is there a reason that the swfobject always takes on
top position in the browser? Do I need to change something in the
SWFoject javascript file, in the code or within either the CSS file
or the dreamweaver HTML code? Here is a link to a site that is very
similar to what I am working on.
http://www.pronghornclub.com
Any help would be most appreciated.

All Active content on a page will always rise to the top, so
to speak,
including Flash, certain form elements, Java applets, and
Active X controls.
This means that each of these will poke through layers. There
is not a good
cross-browser/platform reliable way to solve this issue, but
if you can be
confident in your visitors using IE 5+ or NN6+, then you can
use the Flash
wmode parameter (however, Safari does not support this
properly!).
Adobe articles:
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jlrowedog" <[email protected]> wrote in
message
news:fb53q0$akk$[email protected]..
>I am working on a site which has a swf movie as a
background which fills
>the
> browser window(SWFobject). When I place DIV tags, which
reference a CSS
> id,
> over the top (for absolute positioning, etc.) they
disappear when
> previewed in
> a browser. Is there a reason that the swf file always
takes on top
> position in
> the browser? Do I need to change something in the
SWFoject javascript
> file, in
> the code or within either the CSS file or the
dreamweaver HTML code? Here
> is a
> link to a site that is very similar to what I am working
on.
>
>
http://www.pronghornclub.com
>
> Any help would be most appreciated.
>
>
>

Copied and pasted a div tag but cannot rename it on style sheet. any ideas?

Hello,
I am new to Dreamweaver so after paying someone to basically build be a template, I tried to midify it a little by copying and pasing a div tag to a lower section of my page.
Probe is, its entitled "content-box-top" ... If I make adjust the width or height etc it also changes it to div tage at the top of my page in which I duplicated from.
That all makes sense. So I tried to rename my dupoicate div tag "content-box-bottom". But it doenst appear in the style sheet so I can't make my modifications.
What am I doing wrong and how could this be accomplished? Thanks to all who can help.
JIMM

First off, <div id="names"> need to be unique on a page (used only once)... so a <div> id name cannot be reused on the same page..
Second, just because you rename a <div> does not automatically add/change anything in your CSS.
If you want 2 <div>s to be identical, then assign them each the same class="wearethesame"... or whatever class you want to create.
http://www.w3schools.com/css/css_id_class.asp
or in your CSS file, just copy/paste the CSS for the first #div and rename the pasted version to the same name as the second <div>. This will work just fine.. but it's not an automatic function.
Best wishes,
Adninjastrator

CS4 Div Tags Help Needed

I just upgraded to CS4. In dreamweaver I am trying to build a
site that I designed in Photoshop to Dreamweaver using all Div
Tags. I can get the container to center, but when I place other
divs on top, they wont stay where I put them. I have taken absolute
positioning off, but then they fly off position totally. How to get
around this? I have tried relative, fixed and inherit, all with the
same result. I just cant figure it out. Can anyone help me?

Most of which are erroneous guesses.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Ian Edwards" <[email protected]>
wrote in message
news:ggb7c1$qtg$[email protected]..
> Hi
>
> it would he if you uploaded the code so we can see it.
If you do that then
> no doubt you will be deluged with solutions.
> cheers
>
> Ian
> "martcol" <[email protected]> wrote in
message
> news:ggavg8$gf7$[email protected]..
>>
quote:
Originally posted by:
[email protected]
>> ....when I place other divs on top, they wont stay
where I put them. I
>> have
>> taken absolute positioning off, but then they fly
off position
>> totally.
>>
>> Do the< div> tags sit under each other rather
than if it is what you
>> want, sit
>> side-by-side? Or do they actually, "fly off
position?" Have you thought
>> about
>> the "float" property?
>>
>> Sometimes, leaving off a single closing tag in my
code can have
>> catastrophic
>> results for positioning - have you checked if your
HTML validates.
>> Often, that
>> can be a useful way of checking if your code is the
problem.
>>
>> Martin
>>
>

Trying to get columns to sit beside each other

New to dreamweaver CS5. Not getting alot of things but plugging away.
I have 3 div tags that are in a column. Want to put them in a row with equal widths. Here is what I have so far....can anybody help in a way I can understand?
Thanks
#container {
          width: 968px;
          background: #FFF;
          margin: 0 auto;
          padding-left: 10px;
          padding-right: 10px;
          overflow: hidden;
#main_image {
          background-image: url(../images/randyspichorz.jpg);
          background-repeat: no-repeat;
          position: relative;
          height: 376px;
          width: 968px;
          height: 1000px;
#left_column, #center_column, #right_column {
    width: 316px;

#container {
          width: 968px;
          background: #FFF;
          margin: 0 auto;
          padding-left: 10px;
          padding-right: 10px;
          overflow: hidden;
#main_image {
          background-image: url(../images/randyspichorz.jpg);
          background-repeat: no-repeat;
          position: relative;
          height: 376px;
          width: 968px;
          height: 1000px;
#left_column, #center_column, #right_column {
    width: 316px;
#container + #main_image + #left_column + #center_column + #right_column = 5 div tags, not 3 as you have said.
If you are wanting a 3 column layout, you should use the #container div as the surrounding "container" and within that you need to create 3 div tags. You can create a 3 column layout with each column with the same width using CSS Float technique.
http://www.w3schools.com/css/css_float.asp

CSS div tags

Hi folks,
I have a quick questions which
should be easily resolved. I have created sites using Div
tags, the usual 'masterhead' / 'navi' / 'content' / 'footer'. The
Divs margins are set to 0 for for top and bottom. My querie is, in
IE the Divs 'butt up' to each other however in FF/Safari/Mozilla
there is a gap - is there a way to get the pages to appear the
same? I have tried playing with the margins and had no joy. I have
even attempted to create another Div tag to include the
'navi/content' to see if that would 'squeeze up' the elements -
that didn't work in the desired browsers either - any ideas?
Many thanks in advance

> Murray *ACE* you may not remember but you advised me to
get some CSS
> books,
> which I have read through (one from Sitepoint &
another by aPress) - I
> have you
> to thank in gaining extra knowledge in this. However
don't I wont be
> asking any
> Q's - I'll just try not to ask any 'basic' ones now! ;)
I'm glad I could push you in this direction. The flash of
enlightenment is
such a wonderful experience!
> why on earth cant all browsers have the same protocols
and viewing
> behaviours??
They are trying, thankfully. As opposed to how it was a few
short years
ago, I think they all now agree that the W3C's specifications
are the law.
The problem is that sometimes those specifications are
ambiguous, and when
that happens there is the possiblity of different
interpretations....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"tommysauce" <[email protected]> wrote in
message
news:f8akm4$olo$[email protected]..
> Hi guys,
>
> I was persistent in trying to solve this problem and
worked it out !! Oh
> happy
> days! ;p
>
> Question, why on earth cant all browsers have the same
protocols and
> viewing
> behaviours?? Although I must admit there is a certain
amount of
> satisfaction
> gained when you work stuff out!
>
> Murray *ACE* you may not remember but you advised me to
get some CSS
> books,
> which I have read through (one from Sitepoint &
another by aPress) - I
> have you
> to thank in gaining extra knowledge in this. However
don't I wont be
> asking any
> Q's - I'll just try not to ask any 'basic' ones now! ;)
>

Trying to learn to code div tag so that i can make 3 columns

Hello,
I am trying to learn how to work with the code for div's in Dreamweaver.
I have a id for the main container named wrapper that is 900px wide and I have 3 div's inside of it that are just long blocks of type . Each div (#history, #attitudes, #per) is 300px wide with the height falling to accommodate the type. I want then next to each other, and right now they are just one long column with the 3 sections..each have a different background color. Here is the code so far...I am trying to play with the float and positioning but nothing I do works. In the End, it should just be 3 columns of type next to each other. Each column has one header tag for the topic name and the rest is just using the p body tag. can someone help me get the columns next to one another using the code?
thanks!
babs
#wrapper{
width:900;
          background-color:#CCCC66;
#history{
          width:300px;
          height:80px;
          background-color:#FF9999;
#attitudes{
          width:300px;
          height:80px;
          background-color:#ccFF99;
#per {
          background-color:#FFFF99;
          width:300px;
          height:80px;
Here is an image to see them on top of one another....I jusyt want them side by side.....

Copy & paste this code into a new, blank document in code view. Save and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
body {
    margin:0;
    padding:0;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size:16px;
#wrapper {
width: 900px;
margin: 0 auto;
background-color: #CCCC66;
overflow: hidden; /**float containment**/
/**three columns**/
#history, #attitudes, #per {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
float: left;
width: 33.33%;
min-height: 80px;
padding:12px;
#history { background-color: #FF9999; }
#attitudes { background-color: #CCFF99; }
#per { background-color: #FFFF99; }
</style>
</head>
<body>
<div id="wrapper">
<div id="history">
<h3>History</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis.
Vestibulum luctus mauris sed sem dapibus luctus.
Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>
<div id="attitudes">
<h3>Attitudes</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis.
Vestibulum luctus mauris sed sem dapibus luctus.
Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>
<div id="per">
<h3>Per</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis.
Vestibulum luctus mauris sed sem dapibus luctus.
Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</div>
</div>
</body>
</html>
Nancy O.

Div tag on each other

Similar Messages

Maybe you are looking for