I have a layout requirement whereby the right column needs to be fixed width and the left column should span whatever width is available.
I understand that I can remove the width and float from the left column and that should make it take up entire space available.
Here is what I have
<div style="height:300px;border:1px solid red;padding:10px;">
<div style="height:200px;border:1px solid red;margin-right:150px;">
this should take all width
</div>
<div style="height:200px;border:1px solid green;float:right;width:120px;">
this is right bar with fixed width
</div>
</div>
Any ideas?
Your code is correct. Just move the floated element up:
<div style="height:300px;border:1px solid red;padding:10px;">
<div style="height:200px;border:1px solid green;float:right;width:120px;">
this is right bar with fixed width
</div>
<div style="height:200px;border:1px solid red;margin-right:150px;">
this should take all width
</div>
</div>
http://jsfiddle.net/wwEQb/
Dances with display: table-*** here:
http://jsfiddle.net/EXNvF/
Related
We are using angular-material to create a new respsonsive website.
For now we only use the flex-layouts from angular-material.
We have code like this:
<div layout="column" layout-gt-md="row">
<div flex="50">
Here's some text without a fixed length.
</div>
<div flex="50">
Here's some text without a fixed length.
</div>
</div>
In this case we want to achieve, that we have rows (left to right) on large displays with a width of 50% each.
But the problem is: if its a medium or smaller device, it has 50% height (max-height to be more precise) which causes some overlap with the other div as the text is longer than the 50% height of the div.
How can we achieve, that the flex="50" only applies for layout="row" and the column height adapts to the content size?
Overriding the CSS class to
.layout-column > .flex-50 {
max-height: inherit;
}
doesn't work.
I've provided a demo of the problem on Plunker.
The problem was Visual Studio's way of creating HTML files and our oversight.
Adding <!DOCTYPE html> fixed the problem....embarrassing.
But thanks to #srijith's Plunker I finally noticed it.
I tried your problem in a plunker and for smaller screens, the height does adapt to the content of the div.
Check this plunker right here
This is what I used as well
<div layout="column" layout-gt-xs="row">
<div flex="50" style="border: 1px solid green;">
<Really long text here>
</div>
<div flex="50" style="border: 1px solid green;">
Here's some text without a fixed length.
</div>
</div>
UPDATE:
I forked your plunker and fixed it. Basically the flex-33 class was adding a max-height of 33%. I just set the max-height to 100%
Updated plunk
I've been strugling with some integration issues on angular-material.
On the sample of code below, I'm trying to force the orange div and the blue div to have the same height by adding flex="50".
However, an md-content child element of the blue div containing a large text grows in height whereas it should stay the same and scroll within it's bounds.
http://codepen.io/anon/pen/oxyBMJ
How can I force the md-content element not to grow in height no matter the length of it's content ?
Thanks for your help
You should use md-content as your main container.
<md-content layout-fill layout="column">
<div flex="50" style="border: 5px solid orange" layout="row">
</div>
<div flex="50" style="border: 5px solid blue" layout="row">
</div>
</md-content>
This is how your basic structure should look like. Now define flex values as desired and you will get appropriate result. See the below link for your code.
http://codepen.io/next1/pen/vGrWaM
you have to give the parent of the two div's a max-height and then you giv md-content height:100%; and overflow:auto; like this md-content will stay the same height as "contact" and they will not grow over the parent and not pusch the upper ones
http://codepen.io/danyweis/pen/oxyZLK
What I need is to place 12 divs in a row, with bootstrap.js grid system.
Each column of this row needs to have a border. So, if I put 12 divs with css-class for a column (xs-col-1)
it will break as I put a 1 pixels border to each column.
So my idea was to have an inner div. The problem is that the inner div doesn't stretch. I have tried to put with:100% but this makes not difference. The character inside the inner div goes outside the boundaries for the inner div. The inner div takes up more or less 10% av the width of the parent (xs-col-1).
As I need this on mobile, Im using xs-col-1. And I cannot specify the width in pixels for the inner div.
Is there a way to solve this?
Here is the code for the border put inside the parent. Issue here is that 12 columns will not be on the same row, the column number 12 will go to next row:
<div class="row">
<div class="col-xs-1" style="border:1px solid black;">
<div style="width:200%;">A</div>
</div>
<div class="col-xs-1" style="border:1px solid black;">
<div style="width:200%;">A</div>
</div>
</div>
And here is the code for the border put inside the child. Issue here is that the width for the child doesnt stretch. The letter inside the child is much wider than the inner div itself:
<div class="row">
<div class="col-xs-1">
<div style="width:200%;border:1px solid black;">A</div>
</div>
<div class="col-xs-1">
<div style="width:200%;border:1px solid black;">A</div>
</div>
</div>
Solution seems to be to use "display:table".
When I put this inside the inner div, then it stretched.
I have a div floating left and a div floating right, and I would like to have a background-color changed. It changes the background, but it stops right before the floating divs. When I take them off, it continues having the correct background color that I desire.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
</div>
</div>
thank you!
You must clear the floats so the parent can surround them.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
<!--HERE IS THE CLEARING DIV: -->
<div style="clear: left;"></div>
</div>
</div>
You can also, make the parent itself float, and then you won't need the additional markup (clearing div). If you do this, then your parent will need a width specified.
EXPLANATION:
When an element is floating, the parent is not aware of its height (unless it is a floating element itself). You need a clear below the floats so that the parent div recognises the full height of all its children.
You don't need to force-clear the floats - you need only to define the overflow for any position:relative div. Overflow:hidden and overflow:auto close the div without any further intervention, on everything from IE6 up.
Change the first line to:
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>
and it'll accomplish the same thing as forcing the div closed.
I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.