This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Dreamweaver > April 2004 > Remind me again - how do I get two divisions side-by-side without floating?





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author Remind me again - how do I get two divisions side-by-side without floating?
Murray *TMM*

2004-04-21, 2:47 pm

Folks:

<div id="outer">
<div id="inner1">I want this with top margin of zero</div>
<div id="inner2">I want this immediately beside inner1 at zero top
margin, too</div>
</div>

How do I do dat?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
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
==================


Kindler Chase

2004-04-21, 2:47 pm

Murray *TMM* wrote:
> Folks:
>
> <div id="outer">
> <div id="inner1">I want this with top margin of zero</div>
> <div id="inner2">I want this immediately beside inner1 at zero top
> margin, too</div>
> </div>
>
> How do I do dat?


AFAIK:

1. Use a table ;o)

2. Use absolute positioning.

3. Otherwise you have to float one of them.


--
kindler chase
http://www.ncubed.com
Home of SuperInvoice: The Online Invoicing Application.
Organize your billing process and impress your clients.

news://news.ncubed.com/support
n3 Support Group


Murray *TMM*

2004-04-21, 2:47 pm

Well, it uses floats, but here is the way -

<style type="text/css">
<!--
#inner2 {
margin-left: 250px;
width: 300px;
}
#outer {
height: 350px;
background-color: #FFFFCC;
}
#inner1 {
width: 250px;
float: left;
}
-->
</style>
</head>

<body>
<div id="outer">
<div id="inner1">Content for id "inner1" Goes Here</div>
<div id="inner2">Content for id "inner2" Goes Here</div>
</div>
</body>


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
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
==================

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:c5msjl$kth$1@forums.macromedia.com...
> Folks:
>
> <div id="outer">
> <div id="inner1">I want this with top margin of zero</div>
> <div id="inner2">I want this immediately beside inner1 at zero top
> margin, too</div>
> </div>
>
> How do I do dat?
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver MX
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
> ANSWERS
> ==================
> 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
> ==================
>
>



Murray *TMM*

2004-04-21, 2:47 pm

Kindler:

Yes - float one, coming up....

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
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
==================

"Kindler Chase" <weaver@DELETEME_roubaixinteractive.com> wrote in message
news:c5mtjd$m7k$1@forums.macromedia.com...
> Murray *TMM* wrote:
>
> AFAIK:
>
> 1. Use a table ;o)
>
> 2. Use absolute positioning.
>
> 3. Otherwise you have to float one of them.
>
>
> --
> kindler chase
> http://www.ncubed.com
> Home of SuperInvoice: The Online Invoicing Application.
> Organize your billing process and impress your clients.
>
> news://news.ncubed.com/support
> n3 Support Group
>
>



Les Matthews

2004-04-21, 2:49 pm

"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:c5n4pd$1a3$1@forums.macromedia.com...
> Kindler:
>
> Yes - float one, coming up....


I haven't tried this, but wouldn't something like below in css work?

#left {
width: 50%;
position: absolute;
left: 0px;
top: 0px;
}
#right {
width: 50%;
position: relative;
}


middletree

2004-04-21, 2:49 pm

What's wrong with tables?


"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:c5msjl$kth$1@forums.macromedia.com...
> Folks:
>
> <div id="outer">
> <div id="inner1">I want this with top margin of zero</div>
> <div id="inner2">I want this immediately beside inner1 at zero top
> margin, too</div>
> </div>
>
> How do I do dat?
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver MX
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
> ANSWERS
> ==================
> 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
> ==================
>
>



Murray *TMM*

2004-04-21, 2:49 pm

Nothing at all. That would be the right way to do this. But I didn't want
to do it that way! 8)

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
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
==================

"middletree" <middletree@htomail.com> wrote in message
news:c5oqpg$6c3$1@forums.macromedia.com...
> What's wrong with tables?
>
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:c5msjl$kth$1@forums.macromedia.com...
GET[color=darkred]
>
>



Barry Pearson

2004-04-21, 2:49 pm

Les Matthews wrote:
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:c5n4pd$1a3$1@forums.macromedia.com...
>
> I haven't tried this, but wouldn't something like below in css work?
>
> #left {
> width: 50%;
> position: absolute;
> left: 0px;
> top: 0px;
> }
> #right {
> width: 50%;
> position: relative;
> }


Assuming these IDs simply identify a couple of block-level elements, then the
#left will stick that one in the top left of the page or container, and the
#right will just overwrite it or be very close to it. There is nothing there
to move #right over to the right. (#left is simply taken out of the normal
flow, so won't influence #right).

But the following would be different (and potentially useful):

#left {
width: 50%;
position: absolute;
left: 0px;
top: 0px;
}
#right {
width: 50%;
position: absolute;
right: 0px;
top: 0px;
text-align: right;
}

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/


Murray *TMM*

2004-04-21, 2:49 pm

Barry:

I don't want to use that since the divisions are then taken out of the flow
of the page's code.

But it would work, in general.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
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
==================

"Barry Pearson" <webmaster@childsupportanalysis.co.uk> wrote in message
news:c5orhc$7hf$1@forums.macromedia.com...
> Les Matthews wrote:
>
> Assuming these IDs simply identify a couple of block-level elements, then

the
> #left will stick that one in the top left of the page or container, and

the
> #right will just overwrite it or be very close to it. There is nothing

there
> to move #right over to the right. (#left is simply taken out of the normal
> flow, so won't influence #right).
>
> But the following would be different (and potentially useful):
>
> #left {
> width: 50%;
> position: absolute;
> left: 0px;
> top: 0px;
> }
> #right {
> width: 50%;
> position: absolute;
> right: 0px;
> top: 0px;
> text-align: right;
> }
>
> --
> Barry Pearson
> http://www.Barry.Pearson.name/photography/
> http://www.BirdsAndAnimals.info/
> http://www.ChildSupportAnalysis.co.uk/
>
>



Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews