Lets see this layout:
<div style="float: left">
content1
</div>
<div style="float: left">
<table width="100%"><tr><td>dfsd</td></tr></table>
</div>
then the following happens: the table goes to new line, and will be as wide as the screen. But it should remain next to the previous div, and be as width as the 2nd div.
How to workaround this?
EDIT:
left column is fixed 200px width.
The 2nd column should be 100%
I think you mean that the 2nd column should be 100% of the remainder of the page, correct?
Still, it depends on exactly what you're trying to achieve. You could create a surrounding table, if that makes sense for your content:
<table class="table_surround">
<tr>
<td class="col1">content 1</td>
<td>(table here)</td>
</tr>
</table>
.table_surround { width:100%; }
.col1 { width:200px; }
Or you could use absolute positioning:
<div style="position:absolute; left:0; width:200px;" >content 1</div>
<div style="position:absolute; left:200px; right:0;" >table here</div>
Here's another good option:
Expand a div to take the remaining width
Give your DIVs some width... something like:
<div style="float: left; width: 25%;">
content1
</div>
<div style="float: left; width: 75%;">
<table width="100%"><tr><td>dfsd</td></tr></table>
</div>
By default, <div>s will be set to width: 100%; (bar default margins/padding) in CSS, you need to manually change it.
Floating left will do nothing when there's no space to fit the other elements.
Related
I have to show 2 adjacent boxes, both have a dynamic content (rendered using angular). The Container must have the height of Box1. Box2s heigth may vary due to the dynamicity and it should not be higher as Box1. If higher a scroll should be shown.
I started with the following code using tables:
<table id="Container">
<tr>
<td valign="top" id="Box1">
<dynamic rendered html code/>
<td>
<td> <td>
<td valign="top" style="position: relative; id="Box2">
<div style="position: absolute; top:0; bottom:0; overflow-x: hidden">
<dynamic rendered html code/>
</div>
<td>
</tr>
</table>
Unfortunately it does not work in IE, since (as I'v read on the web) position is not defined for tables (not HTML standard);
So I decided to switch to divs:
<div id="Container">
<div style="display: inline-block; vertical-align:top" id="Box1">
<dynamic rendered html code/>
<div>
<div style="display: inline-block;"> <div>
<div style="display: inline-block; vertical-align:top" id="Box2">
<dynamic rendered html code/>
<div>
</div>
Box1 should always wrap its content. Box2 should not be heigher than Box1, IF then scroll overflow.
Is it possible in CSS? No JQuery and no Javascript.
I believe you want #Box2's height equal to #Box1's height.
There is no way to align there height within the same parent. Therefore, I suggest you to wrap #Box2 with #Box1 like below.
<div id="Box1">
<div id="Box2">
</div>
</div>
And that you can set max-height: 100%; to #Box2 so that the maximum height of #Box2 will not be larger than #Box1.
Adding overflow-x: auto; to #Box2 can show scrollbar automatically when text overflow.
https://codepen.io/blackcityhenry/pen/LMVoZd
I have 3 main div's that should split the screen horizontally (45%,10%,and 45% of width of screen). The left-most div(blue) contains a number of smaller divs(aqua) that need to remain static. The middle (green) and right-most (red) div should float down the page as the user scrolls, but should remain in their horizontal positions. I have set fixed heights for all div's as they will be kept to a certain vertical size.
I tried assigning fixed positions for the green and red div's but they move out of position and block the blue div's.
CSS
.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
HTML
<div class="MatchingDiv" style="width:100%">
<div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
Left-most Div
<!--generate programmatically?-->
<div class="PNMLB" id="rank1">Rank 1<br/></div>
<br/>
<div class="PNMLB" id="rank2">Rank 2<br/></div>
<br/>
<div class="PNMLB" id="rank3">Rank 3<br/></div>
<br/>
<div class="PNMLB" id="rank4">Rank 4<br/></div>
<br/>
</div>
<div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;">Center Div</div>
<div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;">Right-most Div</div>
Please use the style position:fixed;right:0%; for right most div and position:fixed;right:45%; for center div
The working code snippet is given below:
<style>.PNMLB {
height: 400px;
font-style:italic;
overflow-y:scroll;
background-color:aqua;
border-style:double;}
</style>
<div class="MatchingDiv" style="width:100%">
<div class="PNMListBoxes" style="width:45%; float:left;background-color:blue;">
Left-most Div
<!--generate programmatically?-->
<div class="PNMLB" id="rank1">Rank 1<br/></div>
<br/>
<div class="PNMLB" id="rank2">Rank 2<br/></div>
<br/>
<div class="PNMLB" id="rank3">Rank 3<br/></div>
<br/>
<div class="PNMLB" id="rank4">Rank 4<br/></div>
<br/>
</div>
<div class="Middle Div" style="width:10%;height:50px;float:left; background-color:lime;position:fixed;right:45%;">Center Div</div>
<div class="right div" style="overflow-y:scroll;height:400px;width:45%;float:right; background-color:red;position:fixed;right:0%">Right-most Div</div>
if you know the exact width of all divs, you can move them right after another by using CSS property left
.Middle, .right{
position: fixed;
}
.Middle{
left: 45%;
}
.right{
left: 55%;
}
I am personally using jQuery for this, you can get offset of element and position divs more precisely :)
So I made a JSFiddle for the code you provided above.
I removed all the float: left;'s from the two divs that we're supposed to be fixed and I added position: fixed; top: 0; to both of them.
Since that would overlap them all on the left, I move the red middle one left: 45% and the blue one right: 0;.
I figured that's the functionality you were looking for.
Let me know if you have any questions
https://jsfiddle.net/deubwma6/6/
I have some divs which don't behave like I wish.
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block;"><b>Productname</b></div>
<div style="float:right; width:80px;">
<div>
<button id="editBtn">Edit</button>
</div>
<div>
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
JSFiddle link
Two problems here:
the bordered divs is not high enough: the 'remove' button is not visually in the bordered div
When the 'product name' is longer, the buttons are rendered under the div with the product name. I would like the product name to be over multiple lines when this happens. The three divs should always be next to eachother.
The first and last div has a fixed width, the middle div (product name) should stretch with the size of the bordered div
Personally I'd use a table for this. Each row of the table is an item, and you have a column of images, a column of names, and a column of actions. Is this any different to the tables used for invoices?
I can't quite get the effect you want, but improvements can be made: a floated element should come before the elements that are to go around it - so in this case, it should be the first thing inside the list-product-with-border container. Also, you should either have an element with clear:both at the end of the container, or set the container to have overflow:hidden to force the floated element to be inside.
Do you want it like this?
Here's the Fiddle
<style>
.list-product-with-border {
padding:3px;
width:60%;
border:1px solid black;
overflow: hidden;
height: auto;
}
</style>
And now the HTML
<div class="list-product-with-border">
<div style="width:80px; display:inline-block;">img</div>
<div style="display:inline-block; overflow:hidden; height: auto;"><b>Productname Is the right choice baby, as you can see its just done</b></div>
<div style="float:right; width:180px;margin-top: 10px;">
<div style="float: left;">
<button id="editBtn">Edit</button>
</div>
<div style="float: left;">
<button id="removeBtn">Remove</button>
</div>
</div>
</div>
</div>
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
take a look at this jsfiddle . as you can see, the height of the left and right div are not the same with the height of the center div. How can I extend the side divs and make the height as the same as the center div? I tried using height:100%; but I did not get the result that I wanted.
my HTML :
<div id="left">
dfsfdsf
</div>
<div id="center">
fldskjflsjfls
<br/>gdfgdfg
</div>
<div id="right">
fdsflsdf
</div>
my CSS :
#left {float:left;width:100px;background:blue;}
#center {float:left;width:100px;background:purple;}
#right {float:left;width:100px;background:green;}
Instead of floating the divs you can alternatively use display: table-cell; so that the heights are uniform regardless their content.
http://jsfiddle.net/scyxC/2/
#left {display: table-cell;width:100px;background:blue;}
#center {display: table-cell;width:100px;background:purple;}
#right {display: table-cell;width:100px;background:green;}
You can either specify a height for each div, or set them to be 100% and put them in a container div:
Here's my modification to your fiddle:
Modification to Your jsFiddle
<div style="height: 100px;">
<div id="left" style="height: 100%;">
dfsfdsf
</div>
<div id="center" style="height: 100%;">
fldskjflsjfls
<br/>gdfgdfg
</div>
<div id="right" style="height: 100%;">
fdsflsdf
</div>
</div>
The reason of this uneven height is due to the amount of content you put in. Either you can specify a maximum height of each div or use display:table-cell; as suggested by Adrift like this:-
#left {display: table-cell;.....................}
#center {display: table-cell;........................}
#right {display: table-cell;..............................}
I have 2 DIV's that I want to be side-by-side under all circumstances. So far I am accomplishing it like this:
<div style="float: left">
<table> ... </table>
</div>
<div style="float: right; overflow: scroll; width: 1000px">
<pre> ... </pre>
</div>
However, I don't like that I have to specify an absolute width in the 2nd div.
I just want the 1st div to be the minimum width to display the table and 2nd div to take up the rest of the space without overflowing.
Is there a better way?
One way i've found quite versatile is to only float one of the divs. Float the left one and put that much padding on the right div. Here's an example of what i mean: http://jsfiddle.net/a6Bv8/ - i put one with an inner wrapper for borders or padding requirements to make it fluid, as well as the three column example..
#left { width:50%; float:left; }
#right { padding-left:50%; }
<div id="container">
<div id="left">
left left left
</div>
<div id="right">
right right right
</div>
</div>
This is nice, too, to do three columns. You can float the first div to the left and give it it's width ( say 200px ), float the right column to the right and set its width (say 200px ) and set the padding on the third div to padding-left:200px;padding-right:200px (or 210 if you want a gap ).
If you don't mind ignoring ie6&7, this will work nicely:
<div style="white-space:nowrap;">
<div style="display:inline-block;">
blah
</div>
<div style="display:inline-block;">
blah
</div>
<div style="clear:both;"></div>
</div>
There might be some ie hack that will make this work in that browser, check:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
When you say "rest of the space" what do you mean. If your table was suddenly 3000px, what should happen?
I think a solution might be to wrap them in a third div:
<div style="width: 1500px;">
<div style="float: left">
<table> ... </table>
</div>
<div style="float: right;">
<pre> ... </pre>
</div>
<div style="clear:both;"></div>
</div>