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 *
* ---------*
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 *
* ---------*
ASKER
Its something like that but I have this on my code
Div 3 goes under the div2
<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>
Div 3 goes under the div2
And what css do you have?
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;
}
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.
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.
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.
ASKER
Here is an example.
http://jsfiddle.net/5UvY9/3/
http://jsfiddle.net/5UvY9/3/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Oh, ok... I got it now... that fixed... thanks :)
http://jsfiddle.net/5UvY9/