How to display divs next to each other so they don't collapse when minimized?

[jay123]

Hello All,
I am struck in a problem with two Div(s), My code looks like

<div style="width: 100%; font-family: Verdana, Sans-Serif; height: 80px; ">
	<div style="float:left; width:500px;">
		<asp:Image ID="abc" runat="server" ImageUrl="../Images/abc.gif" />
    </div>	
	<div style="float:right; padding-left: 10px; padding-right: 20px; padding-top: 1px; padding-bottom: 1px; font-family: Verdana, Arial;	font-size: 8pt; font-weight: bold;">
		<p style="margin-top:13px; margin-bottom:-1px">Text1</p>
		<p style="margin-top:-1px; margin-bottom:-1px">Text2</p>
		<p style="margin-top:-1px; margin-bottom:-1px">Text3</p>
		<p style="margin-top:-1px; margin-bottom:-1px">Text4</p>
    </div>
</div>

This all looks fine when opened in a normal window size but when we shrink(minimize ) the browser window, text in right Div start coming below Image(Div left). What i want is that both the div's should remain in a same row(user should be able to minimize the window to some extend but after that content doesnt minimize.

I hope i have clearly explained my problem.

Any help will be appreciated.

Regards
Jay

[Rabbit]

Try the min-width property in the right div.

[JKing]

Add a width to your right div.

[jay123]

Sorry i think i got it wrong, problem i have is when i minimize my browser. Div right(Text) goes under Div Left(image).

What i want to acheive is, when user minimize the browser horizontally. right div should come close to left one but should never go below Image (which it does now)

Solution given above weren't my problem but still they did help me in solving other problem which i was ignoring.

[Rabbit]

You're going to need a min-width in the parent div.

[Rabbit]

Sorry, it seems internet explorer doesn't understand the min-width property. You will have to use just width for the parent div.

[jay123]

IE really behaves strangly with min-width. recently i have used min-width in IE and it woked but in this particulat instance its not. i'll post the solution if i find any.

anyway thank Rabbit for your quick replies

Jay

[AutumnsDecay]

You could also try using position:relati ve; width: XX%; for each of your child divs.

[jay123]

Thanks AutumnsDecay..

Solution that worked for me

<div style="width: 100%; font-family: Verdana, Sans-Serif; height: 80px; ">
    <div style="float:left; [B][I]position:relative; width:70%[/I][/B]">
        <asp:Image ID="abc" runat="server" ImageUrl="../Images/abc.gif" />
    </div>        
 <div style="float:right; [B][I]position:absolute; width:370px;[/I][/B] padding-left: 10px; padding-right: 20px; padding-top: 1px; padding-bottom: 1px; font-family: Verdana, Arial;    font-size: 8pt; font-weight: bold;">
        <p style="margin-top:13px; margin-bottom:-1px">Text1</p>
        <p style="margin-top:-1px; margin-bottom:-1px">Text2</p>
        <p style="margin-top:-1px; margin-bottom:-1px">Text3</p>
        <p style="margin-top:-1px; margin-bottom:-1px">Text4</p>
    </div>
 </div>

Changes in Bold & italics

[jay123]

Another problem, above solution works like a treat in IE but in Firefox both the div come on each other (one above other).

another solution i found online was some border-left and then giving margin-left in minus(-), but in that case border comes over the div data and we dont se anything.

Like if i do something like

    <div style="width: 100%; font-family: Verdana, Sans-Serif; height: 80px; [B][I]border-left:700px[/I][/B]">
       <div style="float:left; [I][B]margin-left:-700px;[/B][/I]">
           <asp:Image ID="abc" runat="server" ImageUrl="../Images/abc.gif" />
        </div>        
     <div style="float:right; padding-left: 10px; padding-right: 20px; padding-top: 1px; padding-bottom: 1px; font-family: Verdana, Arial;    font-size: 8pt; font-weight: bold;">
            <p style="margin-top:13px; margin-bottom:-1px">Text1</p>
            <p style="margin-top:-1px; margin-bottom:-1px">Text2</p>
            <p style="margin-top:-1px; margin-bottom:-1px">Text3</p>
            <p style="margin-top:-1px; margin-bottom:-1px">Text4</p>
       </div>
   </div>

when i try this, inner div (image one) goes under parent div border. i have tried z-index for inner div but it doesnot work..

Why is world so complicated?? :(

Ok Guys, i have checked so many solutions but some work for IE and some for Firefox(etc). But i couldnot find any which works in both. All i need is min-width which doesnt work for IE(shame). May god give some common-sense to IE..

I know i can have CSS for IE and Firefox, but system i am working on is quite heritage and the way CSS gets called(from DB) is very complicated and strange. CSS files get loaded after i am done with this step (its a header of a master page), so any styling that need to be done has to be in control itself rather than giving any class name.

[jay123]

Sorted at last

<div class="minwidth" style="width: 100%; font-family: Verdana, Sans-Serif; height: 80px;">
	<div class="imagecontainer" style="float:left;">
		<asp:Image ID="OpenHeaderLogoImage" runat="server" ImageUrl="../Images/Open/OpenHeaderLogo.gif" />
        </div>	
	<div style="float:right; width:370px; padding-left: 10px; padding-right: 20px; padding-top: 6px; padding-bottom: 1px; font-family: Verdana, Arial;	font-size: 8pt; font-weight: bold;">
		<p style="margin-top:13px; margin-bottom:-1px">Need to contact the business Support Team?</p>
		<p style="margin-top:-1px; margin-bottom:-1px">Telephone number: 0844 8921 336</p>
		<p style="margin-top:-1px; margin-bottom:-1px">Email: powerplace@powerplace.co.uk</p>
		<p style="margin-top:-1px; margin-bottom:-1px">Fax: 01926 438265</p>
    </div>
</div>

CSS

.minwidth
{
     min-width:800px;
}

* html .minwidth 
{
     border-left:400px solid #fff; /* CHANGED */
}

* html .imagecontainer
{
     margin-left:-400px;
     position:relative;
}