Link to home
Start Free TrialLog in
Avatar of Medrise
Medrise

asked on

Floating DIV

I have 2 divs that float side by side. I want the div on the right side to be able to expand down if the content is wider than the div.

Current for some reason the div expands but it goes under the div on the right, and I want to keep the div on the same place.

Something like this.
*-----------------------*
* DIV 1   --   DIV 2 *
*-------------   DIV 2 *
                 *  DIV 2 *
                 * ---------*
Avatar of Gary
Gary
Flag of Ireland image

Not sure what you mean. How does your code differ from this
http://jsfiddle.net/5UvY9/
Avatar of Medrise
Medrise

ASKER

Its something like that but I have this on my code

<div id="main" class="left">
    <div class="left">
           Div 1
    </div>
    <div class="wrap left">
           <div class="left">
                  Div 2
           </div>
           <div class="left">
                  Div 3 <br/>
                  Div 3 <br/>
                  Div 3 <br/>
           </div>
    </div>
</div>

Open in new window


Div 3 goes under the div2
And what css do you have?
Avatar of Medrise

ASKER

Here is all the css and code

<div class="clearCSS prodDisplay">
	<div class="subGroup left">
		<div class="icon left">
			ICON
		</div>
		<div class="left smallPaddingLeft">
			INPUT
		</div>
		<div class="left medPaddingLeft smallPaddingRight">
			LINK
		</div>
		<div class="partNumandDesc left">
			<div class="medPaddingLeft partNumber left">
				DIV 1
			</div>
			<div class="prodDesc left">
				DIV 2<br/>
				DIV 2<br/>
				DIV 2<br/>
				DIV 2<br/>
				DIV 2<br/>
			</div>
		</div>
		<div class="left extraPaddingRight">
			some text
		</div>
		<div class="left leadTime medPaddingLeft">
			some text
		</div>
	</div>
</div>



.prodWrap {
	margin: 0;
}
.prodWrap .spacing {
	margin: 0 38px 0 38px;
}
.prodWrap .shippingLocation {
	text-align: right;
	font-weight: bold;
}
.prodWrap .header {
	width: 89%;
	margin-left: 32px;
	padding: 5px 25px 5px 25px;
	border-bottom:1px solid #990000;
	border-top:1px solid #990000;
}
.prodWrap .centerText {
	text-align: center;
}
.prodWrap .left {
	float: left;
}
.prodWrap .nomargin {
	margin-left: -15px;
}
.prodWrap .headerText {
	font-weight: bold;
	font-size: 12px;
}
.prodWrap .smallPaddingRight {
	padding-right: 10px;
}
.prodWrap .smallPaddingLeft {
	padding-left: 10px;
}
.prodWrap .medPaddingRight {
	padding-right: 20px;
}
.prodWrap .medPaddingLeft {
	padding-left: 20px;
}
.prodWrap .largePaddingRight {
	padding-right: 430px;
}
.prodWrap .extraPaddingRight {
	padding-right: 45px;
}
.prodWrap .clearCSS {
	clear: both;
}
.prodWrap .prodDisplay {
	padding-left: 32px;
}
.prodWrap .prodDisplay .subGroup {
	width: 980px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.prodWrap .prodDisplay .subGroup .icon {
	margin: 0 auto;
	width: 30px;
}
.prodWrap .prodDisplay .subGroup .partNumandDesc .partNumber {
	font-size: 12px;
	font-weight: bold;
}
.prodWrap .prodDisplay .subGroup .partNumandDesc .prodDesc {
	font-size: 13px;
}
.prodWrap .prodDisplay .subGroup .leadTime {
	font-size: 12px;
}
.prodWrap .prodDisplay .subGroup .partNumandDesc {
	min-width: 630px !important;
	max-width: 630px !important;
}

Open in new window

Avatar of Medrise

ASKER

It works on JSFiddle must be some other css override.
You are targeting those divs starting with an element that has a class prodWrap - but your code doesn't have an element with that class.
Wrap the html in a div with that class and your css will work fine.
http://jsfiddle.net/GaryC123/5UvY9/2/

At least I assume this is what you are looking for.
Avatar of Medrise

ASKER

I added that... it was missing on the code here... but the problem is that you have the <br/> after each text... and I don't have that on the original text... if I add the <br> it works. but I don't know how long the text is.
Avatar of Medrise

ASKER

Here is an example.
http://jsfiddle.net/5UvY9/3/
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Medrise

ASKER

Oh, ok... I got it now... that fixed... thanks :)