divs floated to left and right + another div therebetween
Question
This is my mockup:
I want to set divs as in the picture. DIV 1 and DIV 2 contain dynamically generated content and the width is different every time.
Div 1 is floated to the left side and Div 2 is floated to the right side.
My question is: how to position Div 3 to fit it between div 1 and 3?
My code is: HTML
<div class="dia">
<div class="left">sassssss</div>
<div class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div class="right">asdasdfgdsgdf</div>
</div>
CSS
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}
.dia .center {
margin-left: 20px;
}
.dia .left, .dia .right {
overflow: hidden;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
background: rgb(214,214,214);
}
and I want to fit center div which now is too wide and moves right div lower than I want.
SOLUTION:
HTML
<div class="dia">
<div class="left">sassssss</div>
<div class="center">ddddddddddddddddddddd dddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddd dddddddddddd</div>
<div class="right">asdasdfgdsgdf</div>
</div>
CSS
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
width: inherit;
}
.dia .left, .dia .right {
overflow: hidden;
height: 106px;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
}
.dia .center {
height: inherit;
float: left;
}
JQuery
$('.dia .left a:not(:first-child)').css('width',$('.dia a').outerWidth(true)+'px');
$('.dia .center').css('width',$('.dia').width()-$('.dia .left').outerWidth(true)-$('.dia .right').outerWidth(true)+'px');
And Fiddle
4 answers
solution1
2 2013-08-16 21:42:47
Simply float the central div.
For your purpose you case use:
.dia{
float:left//Float container in order to contain nested elements.
}
.dia div{
float:left;
}
Here's a fiddle you can fiddle with
solution2
1 ACCPTED 2013-08-16 21:54:50
Well I did manage to do this in this fiddle , but it feels a little like a workaround, since you have to be careful with center content. Then again, it works, so you can use it as a placeholder or something until you or someone else comes up with better solution.
CSS:
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}
.dia .center {
overflow:auto;
height: 100px;
background-color: #aaa;
margin-left: 20px;
}
.dia .left {
float: left;
height: 100px;
background-color: #ddd;
}
.dia .right {
position:absolute;
/*.dia padding + border*/
right: 15px;
/*.dia padding + border + (.dia height - this height)/2*/
top: 18px;
height: 100px;
background: rgb(214,214,214);
}
solution3
0 2016-04-07 17:47:11
try this.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#panelLeft, #panelRight
{
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
#panelCenter
{
-webkit-flex: 3; /* Safari 6.1+ */
-ms-flex: 3; /* IE 10 */
flex: 3;
}
</style>
</head>
<body>
<div id="main">
<div id="panelLeft" style="background-color:coral;">RED</div>
<div id="panelCenter" style="background-color:lightblue;">BLUE</div>
<div id="panelRight" style="background-color:lightgreen;">Green div with more content.</div>
</div>
</body>
</html>
solution4
-2 2013-08-16 21:41:35
How about using a table instead?
<table class="dia">
<tbody>
<tr>
<td class="left">sassssss</td>
<td class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>
<td class="right">asdasdfgdsgdf</td>
</tr>
</tbody>
</table>
Then the CSS would be:
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
width: 100%;
table-layout: fixed;
}
.dia .center {
margin-left: 20px;
word-wrap: break-word;
}
.dia .left, .dia .right {
overflow: hidden;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
background: rgb(214,214,214);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.