Web Design Forums

Brown · 29-06-2004, 08:42

help please.

3 elements (separately div'd) contained within one div.

currently display thus:

div 1
div 2
div3

i want it to display:

div 1 div 2 div 3

cheers,

stickmus · 29-06-2004, 08:59

The answers in your title...

Code:

<head>
<style>
div { display:inline; }
</style>
</head>

<body>
<div>blah1</div>
<div>blah2</div>
<div>blah3</div>
</body>

Brown · 29-06-2004, 09:08

tried that. sorted it. you have to apply display: inline to all the divs within the container. cheers.

ps - what's a mus?

Stickman · 29-06-2004, 09:25

Like a man, but not as good.

andycogbill · 29-06-2004, 10:33

Related question: I, too, am trying to get two div's to display inline. Problem is, they contain only images; so when I do a display:inline the divs display fine, but the images have a little space around them (a la no display:block). When I apply display:block to divname img, the image divs stack on top of each other.

Thoughts?

adras · 29-06-2004, 10:41

Quote:

so when I do a display:inline the divs display fine, but the images have a little space around

Use display:inline and set margins and padding to 0px to the divname img.

andycogbill · 29-06-2004, 10:46

nope, didn't work. >:|

stickmus · 29-06-2004, 10:56

Quote:

Originally Posted by andycogbill

nope, didn't work. >:|

how 'bout

divname img {
margin:0;
padding:0;
}

can we see it?

stickmus · 29-06-2004, 10:59

Quote:

Originally Posted by Brown

what's a mus?

nobody's ever stickmus so it makes choosing usernames for things pretty easy...

mus was for music which I used to do but haven't really got the time any more. My old and out of date music site is www.mistercut.com

andycogbill · 29-06-2004, 11:07

I did it! For those wondering, here's how:

I had both images in one containing div, to which I applied all my positioning styles to orient and size it correctly on the screen. Then I put both images inline, with no divs around them, and gave them both an id (for here i put img1 and img2). Then I gave them these styles:

#img1{
margin: 0px;
padding: 0px;
}
#img2{
position: absolute;
right: 0;
margin-right: 5px;
}

[Edit: trimmed the stylesheet code.] Anyhow, this solution worked perfectly in PC IE,Firefox and Mac IE,Safari,Firefox without any weird margins/padding.

Yay.

smallbeer · 29-06-2004, 11:08

can't you just float the divs?

andycogbill · 29-06-2004, 11:11

Quote:

Originally Posted by smallbeer

can't you just float the divs?

Tried that -- no, because they need to be able to push down the containing div depending on their height.

29-06-2004, 08:42	#1 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	css - display inline help please. 3 elements (separately div'd) contained within one div. currently display thus: div 1 div 2 div3 i want it to display: div 1 div 2 div 3 cheers,

29-06-2004, 08:59	#2 (permalink)
stickmus hmmm... Join Date: Jan 2004 Location: Yorkuk Posts: 2,127	The answers in your title... Code: <head> <style> div { display:inline; } </style> </head> <body> <div>blah1</div> <div>blah2</div> <div>blah3</div> </body>

29-06-2004, 10:33	#5 (permalink)
andycogbill Notorious? Join Date: Nov 2003 Location: Middlebury, VT Posts: 417	Related question: I, too, am trying to get two div's to display inline. Problem is, they contain only images; so when I do a display:inline the divs display fine, but the images have a little space around them (a la no display:block). When I apply display:block to divname img, the image divs stack on top of each other. Thoughts? __________________ Now adding "eh?" to the end of my sentences.

29-06-2004, 10:46	#7 (permalink)
andycogbill Notorious? Join Date: Nov 2003 Location: Middlebury, VT Posts: 417	nope, didn't work. >:\| __________________ Now adding "eh?" to the end of my sentences.

29-06-2004, 11:07	#10 (permalink)
andycogbill Notorious? Join Date: Nov 2003 Location: Middlebury, VT Posts: 417	I did it! For those wondering, here's how: I had both images in one containing div, to which I applied all my positioning styles to orient and size it correctly on the screen. Then I put both images inline, with no divs around them, and gave them both an id (for here i put img1 and img2). Then I gave them these styles: #img1{ margin: 0px; padding: 0px; } #img2{ position: absolute; right: 0; margin-right: 5px; } [Edit: trimmed the stylesheet code.] Anyhow, this solution worked perfectly in PC IE,Firefox and Mac IE,Safari,Firefox without any weird margins/padding. Yay. __________________ Now adding "eh?" to the end of my sentences.

29-06-2004, 09:08	#3 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	tried that. sorted it. you have to apply display: inline to all the divs within the container. cheers. ps - what's a mus?

29-06-2004, 09:25	#4 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,527	Like a man, but not as good.

29-06-2004, 11:08	#11 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,200	can't you just float the divs? __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search