force 2 div's to be on the same line using CSS

Dev Shed Forums Sponsor:

April 22nd, 2004, 01:10 PM

edman007

Trapped on the forums...help

Join Date: Aug 2003

Location: /Users/edman007

Posts: 4,617

Folding Points: 67263 Folding Title: Intermediate Folder

Time spent in forums: 1 Month 3 Weeks 3 Days 5 h 1 m 50 sec
Reputation Power: 788

force 2 div's to be on the same line using CSS

how can i keep these 2 divs i have on the same line, i tried min-width for the div they are in and it works perfect but IE doesn't support it, i even tried a extra div to use as a spacer but IE seems to make keep them on the same line even though there is already enough space for it, here is the html i'm using

Code:

<div id="ms_all" ><!-- Start all mapserver -->
<div id="ms_main_map_div">
	
<input alt="Map" id="ms_main_image" type="image" name="mapa" src="map_img.phtml?[data_to_img]" />
	
</div>
<div id="ms_side_bar" >
<!-- A bunch of form stuff -->
</div><!-- End Side Bar -->
</div><!-- End all mapserver -->

and here is the css

Code:

#ms_all			{
			/*padding:5px;*/
			height:610px;
			min-width:810px;
			position:relative;
			
			}
#ms_main_map_div	{
			padding:2px;
			left:5px;
			float:left;
			/*top:2px;*/
			width:600px;
			}
#ms_main_image 		{
			cursor:crosshair;
			width:600px;
			height:600px;
			}
#ms_side_bar 		{
			right:2px;
			float:right;
			padding-top:20px;
			/*top:10px;*/
			padding:2px;
			width:200px;
			/*clear:both;*/
			}

i want the 'ms_main_map_div' and the 'ms_side_bar' to be on the same line, but the 'ms_side_bar' stuff keeps jumping to the bottom of the page if it doesn't fit in the window, so does anyone know of a way to get IE to display this the right way or maybe make IE support the min-width thing, preferably keeping my CSS and XHTML valid

April 22nd, 2004, 01:55 PM

ian ocky

Contributing (?) User

Join Date: Mar 2004

Location: uk

Posts: 462

Time spent in forums: 1 m 38 sec
Reputation Power: 5

hey edman007
not sure about css, but try this workaround ...
http://www.thereddevil.net/examples...ivalignment.htm

while i'm at it, kk5st (gary) has a nice demo on the subject as well
http://garyblue.port5.com/webdev/imagefloat.html

__________________
hope that helps... take care... ian
feel free to email me... the cockney one...
ian*at*thereddevil.net

April 22nd, 2004, 02:09 PM

mateoc15

C A R D S

Join Date: Mar 2004

Location: The 'Ville

Posts: 776

Time spent in forums: 2 Days 9 h 12 m 56 sec
Reputation Power: 12

have you tried using the DISPLAY: INLINE attribute? look that up and that could help, depending on the situation... i think default is BLOCK which makes it put each on new line

__________________
Reinventing the wheel again

April 22nd, 2004, 02:20 PM

edman007

Trapped on the forums...help

Join Date: Aug 2003

Location: /Users/edman007

Posts: 4,617

Time spent in forums: 1 Month 3 Weeks 3 Days 5 h 1 m 50 sec
Reputation Power: 788

i've tried the display:inline and that didn't work

and ian ocky, none of it worked, and the first link you gave didn't work, but i found the page you meant

here is the page if you want to see it, i hope that helps, maybe its a stupid mistake on my part, and like i said it only happens in IE because it doesn't support min-width, just shrink the windows to less that 800px wide and the form stuff jumps to the bottom of the page

linky

April 22nd, 2004, 02:27 PM

ian ocky

Contributing (?) User

Join Date: Mar 2004

Location: uk

Posts: 462

Time spent in forums: 1 m 38 sec
Reputation Power: 5

hi edman007
hmmm strange cos both garys and mine scripts work everywhere else...

soz about the link i copied it from a previous answer should have been
http://www.thereddevil.net/examples...ivalignment.htm
i'll take a sneaky peaky at ur site, but right now i'm off for a bite to eat and maybe a well earned pint

April 22nd, 2004, 02:27 PM

mateoc15

C A R D S

Join Date: Mar 2004

Location: The 'Ville

Posts: 776

Time spent in forums: 2 Days 9 h 12 m 56 sec
Reputation Power: 12

did you put the DISPLAY: INLINE in the ms_all? if it's going to work at all, that's where it should go... let me know

April 22nd, 2004, 02:44 PM

edman007

Trapped on the forums...help

Join Date: Aug 2003

Location: /Users/edman007

Posts: 4,617

Time spent in forums: 1 Month 3 Weeks 3 Days 5 h 1 m 50 sec
Reputation Power: 788

yes that is where i put it, didn't work before, didn't work now, it displays correct if the window is over 800px to 820px wide though, i even tried white-space:nowrap; and it didn't work, i took out the display:inline and white-space:nowrap because they didn't work

April 22nd, 2004, 06:13 PM

davepass

Contributing User

Join Date: Mar 2004

Posts: 318

Time spent in forums: 5 Days 34 m 28 sec
Reputation Power: 30

this may fall into the "hack" catagory but changing the float in #ms_main_map_div to float:right and adding a float:left; to #ms_all should keep them on the same line

i just had a similar problem and this did the trick

April 22nd, 2004, 07:05 PM

edman007

Trapped on the forums...help

Join Date: Aug 2003

Location: /Users/edman007

Posts: 4,617

Time spent in forums: 1 Month 3 Weeks 3 Days 5 h 1 m 50 sec
Reputation Power: 788

i tried that float thing and nothing happened in IE but i my other browser the image and form swapped sides

#10

April 23rd, 2004, 02:20 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,549

Time spent in forums: 1 Month 2 Days 5 h 25 m 15 sec
Reputation Power: 606

Not tested.

Create a container for the page,

Code:

#container {
    width: 810px;
    margin: 0 auto;
    }

and dump the entire page into it. This has the advantage? that you may center the whole thing in any window width. I think then you can lose #ms_all.

IE doesn't grok min/max anything, so if you want this to work in an 800px window, you'll have to force a width. You could reduce the width of your floats so that the total of both, including all padding, borders and margins total less than about 780px.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

Ask a better question, get a better answer.

#11

April 23rd, 2004, 11:24 AM

edman007

Trapped on the forums...help

Join Date: Aug 2003

Location: /Users/edman007

Posts: 4,617

Time spent in forums: 1 Month 3 Weeks 3 Days 5 h 1 m 50 sec
Reputation Power: 788

that works ok, but i don't like having a static width

#12

April 23rd, 2004, 01:46 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,549

Time spent in forums: 1 Month 2 Days 5 h 25 m 15 sec
Reputation Power: 606

Quote:

Originally Posted by edman007

that works ok, but i don't like having a static width

That's fine. In that case, since IE can't handle min-width, you're stuck with the next container, <body>. If you want the two floats to appear side by side, the sum of their gross widths must total less than the available body width, as suggested above.

Alternatively, make the right float a static, non-float element. This is likely the better solution for guaranteeing side by side placement. Look at my float demo 2, especially the last two examples.

Ye pays yer money, ye takes yer cherce.

cheers,

gary