I have the following html markup:
.container {
border: 1px solid green;
}
.right {
border: 1px solid #000;
float: right;
width: 40px;
}
.left {
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
<br/>
multiple rows
</div>
</div>
</div>
As you can see right block looks ugly. How could I make right element fluid height 100%?
Add the rule height:100% the right div, and remove float:right. I changed it to position:absolute, so that you didn't need the container's height.
.container {
border: 1px solid green;
position: relative;
width: 100%;
}
.right {
border: 1px solid #000;
width: 40px;
height: 100%;
position: absolute;
right: 0;
}
.left {
display: block;
border: 1px solid red;
overflow: hidden;
margin-right:40px;
}
<br><br><div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
</div>
</div>
</div>
If your application will run in a modern browser, then using flexbox is a good way to go: http://jsfiddle.net/2hn9zgog/.
HTML:
<div class="container">
<div class="right">Right</div>
<div class="left">
Left fluid
<br/>multiple rows
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
outline: 1px dotted gray;
}
.right {
order: 2;
flex: 0 0 auto;
border: 1px solid green;
}
.left {
flex: 1 0 auto;
border: 1px solid red;
}
add clear: both; after floated element.
<div class="right"></div>
<div style="clear: both"></div>
Add
html, body{
height: 100%;
min-height: 100%;
}
.your-container{
height: 100%;
}
Related
How to vertical-align without using display table/table-cell or position absolute ?
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
Here is an another option using "Flex" property.
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
#parent {
border: 1px solid red;
display: flex;
align-items: center;
height: 100vh;
}
.child {
border: 1px solid blue;
flex-grow: 1;
}
Codepen demo link
You can use position relative, with top of 50% and a translation of -50%.
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
position: relative;
top: 50%;
transform: translate(0,-50%);
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
Another method could be to use a floater div
#parent {
border: 1px solid red;
height: 100vh;
}
.floater {
float:left;
height:50%;
width:100%;
margin-bottom: -25px;
}
.child {
border: 1px solid blue;
clear: both;
height:50px;
}
<div id="parent">
<div class="floater"></div>
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
You can try using display:flex.
CSS
#parent {
border: 1px solid red;
height: 100vh;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
You can use display:flex;:
#parent {
border: 1px solid red;
height: 100vh;
display:flex;
align-items:center;
justify-content:center;
}
You can use like that I think
position: fixed; top: 50%;
if you do not mind browser compatibility I would go with flex - see #rblarsen, #Satheesh Kumars answers.
but if you need to expand browser support, here is a more complex but rather solid solution : tested IE9+ FF Chrome and other major browsers...
check out this fiddle : https://jsfiddle.net/kLLz0nm2/
HTML
<div class="wrapper">
<div class="content">Middle aligned</div>
<div class="middle"></div>
</div>
CSS
.wrapper{
width : 100%;
height : 100%;
text-align: center;
}
.content{
display: inline-block;
vertical-align: middle;
}
.middle{
height: 100%;
display: inline-block;
vertical-align: middle;
}
P.S - the above translate solution while fairly simple can sometimes cause poor rendering issues, check out :
I'm facing a css problem realted to inline-div.
When the text(or sentece) is long, the inline div pushes down as on the image below:
But, when I add a line break, It works perfectly.
How can I make it work without having to use <br>? The main content to be posted is dynamic and it also needs to be responsive.
Thanks
Please Note: This is a simplified version of my actual code. In the
actual code the width of the main container is 100%
HTML
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
CSS
body{
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv{
border: 10px solid brown;
display:inline-block;
width: 70px;
overflow:hidden;
vertical-align:top;
}
#secondDiv{
border: 10px solid skyblue;
float:left;
width: 70px;
}
#thirdDiv{
display:inline-block;
border: 5px solid yellowgreen;
vertical-align:top;
}
use : white-space: nowrap; for the div containing the long sentences.
You can use flexbox. Just add
#container {
display: flex;
}
body {
width: 350px;
margin: 0px auto;
}
#container {
display: flex;
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
vertical-align: top;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
vertical-align: top;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
I have a central div that have 4 others divs arrount it (top, right, left, bottom).
Top and Bottom divs are suposed to be fixed. They don't have to increase neither height nor width.
Right and left divs are ONLY suposed to increase its width.
How?
The "content" div (central) is a table that can have as many rows as the user wants. Then, I want to increase or decrease the height of the left and right divs depending on the height of the "content".
I want to automatically do that .
How can I do that?
I have created an example with what I have done, without success.
https://jsfiddle.net/y6ad2crg/4/
<div class="pantalla">
<div class=" pantallaSup"></div>
<div class="pantallaEsq"></div>
<div class="pantallaDre"></div>
<div class="interiorPantalla">
content<br>
aaa<br>
bbb<br>
ccc<br>
ddd<br>
eee
</div>
<div class="pantallaInf"></div>
</div>
The result I want to get is that:
What am I doing wrong?
Maybe just changing little things in css it may be done, or maybe my html is wrong designed...
change u code
https://jsfiddle.net/p7haf3oo/
.pantalla {
/*position: relative;*/
display: block;
width: 690px;
background-color: gray;
}
.pantallaSup {
height: 200px;
width: 100%;
background: orange;
}
.flex {
display: flex;
align-items: stretch;
}
.pantallaEsq {
width: 69.4px;
border-right: 4px solid black;
background: red;
display: block;
}
.pantallaDre {
width: 69.4px;
border-left: 4px solid black;
background: red;
display: block;
align-self: stretch;
min-height: 100px;
}
.pantallaInf {
height: 200px;
width: 100%;
background: orange;
}
.interiorPantalla {
position: relative;
margin: 0 auto;
border: 1px;
border-color: blue;
border-style: solid;
width: 550px;
background-color: white;
}
<div class="pantalla">
<div class="pantallaSup"></div>
<div class="flex">
<div class="pantallaEsq"></div>
<div class="interiorPantalla">
content
<br> aaa
<br> bbb
<br> ccc
<br> ddd
<br> eee
</div>
<div class="pantallaDre"></div>
</div>
<div class="pantallaInf"></div>
</div>
I believe I have coded what you're looking for -https://jsfiddle.net/Shuaso/vpmn3LLv/
I removed all the unnecessary divs and used CSS borders and background colors to achieve the same effect. You can alter the content in the "content" div and see the dynamic styles. Here's the code:
CSS:
.container {
width: 500px;
background-color: orange;
padding: 20px 0;
}
.content {
border-left: 20px solid red;
border-right: 20px solid green;
background-color: white;
}
HTML:
<div class="container">
<div class="content">
<p>test</p>
<p>test</p>
</div>
</div>
I have a parent div of unknown width (the width depend on some screen width calculations). The number of the child divs is 4 and are floated so that they are horizontally aligned. The 1st, 2nd and 4th are good candidates for fixed width value. However, the 3rd element can stretch to fit the remaining space in the parent div.
I don't know why the approach of display:table; for parent and display:table-cell for children didn't work for me. The three element's width is fixed except for the concerned div where I also tried width:auto to no avail.
<div class="parent">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
</div>
A minimal CSS:
.parent
{
width: 100%;
display:table;
}
.first
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.second
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.third
{
height: 80px;
float: left;
display: table-cell;
}
.fourth
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
Your usual help is much appreciated.
You can do this with Flexbox, so if you add flex: 1 to one child div it will take rest of free width
.parent {
display: flex;
border: 1px solid black;
}
.child {
border: 1px solid black;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
flex: 1;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
Or you can use CSS Table with table-layout: fixed here is Browser support
.parent {
display: table;
width: 100%;
border: 1px solid black;
table-layout: fixed;
}
.child {
border: 1px solid black;
display: table-cell;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
width: 100%;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
For IE9+
You can use inline-block and calc() for this.
Snippet
body {
margin:0
}
.parent {
border:solid black;
font-size:0; /*fix inline-block gap*/
}
.child {
border: 1px solid red;
margin: 5px;
width:100px;
display:inline-block;
font-size:16px /*restore font -size*/
}
.calc{
width: calc(100% - 348px)
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child calc">three</div>
<div class="child">four</div>
</div>
For IE8+
you can use display:table/table-cell
Snippet
body {
margin: 0
}
.parent {
border: solid black;
display: table;
table-layout: fixed;
width: 100%;
/*optional*/
border-collapse:separate;
border-spacing:5px;
box-sizing:border-box;
}
.child {
border: 1px solid red;
width: 100px;
display:table-cell;
}
.big {
width:100%
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child big">three</div>
<div class="child">four</div>
</div>
I have parent element width:100px and position:relative. And I have its inner element with position:absolute. I need this inner element to stretch out up to 200px, but it doesn't work. Maximum value it takes is 100% of parent.
UPD
I don't want width to be fixed. I just needed it to be up to 200px if there is content and auto if not much content there.
p.s. I need those position properties
Here's html:
<div class='parent'>
<div>element</div>
<div class="inner">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
styling:
.parent {
width: 100px;
border: 1px solid yellow;
position: relative;
}
.inner {
max-width: 200px;
border: 1px solid red;
position: absolute;
}
.item {
float: left;
border: 1px dotted grey;
}
And jsfiddle to the example
Anyone please help
It is working fine. Your maximum width allowed is 200 pixels. See it here:
http://jsfiddle.net/jy6g2q7b/1/
Maybe you are searching only for width (is fixed)
.inner { width: 200px; }
See it working: http://jsfiddle.net/jy6g2q7b/4/
add "width: 200%" to the .inner and the max-width will still work.
.inner {
width: 200%;
max-width: 200px;
border: 1px solid red;
position: absolute;
}
http://jsfiddle.net/jy6g2q7b/2/
if you are using AngularJS, you can use ng-style = {'width':'200%'}. And if not, you can change it to inherit from parent `
.inner {
max-width: inherit;
border: 1px solid red;
position: absolute;
}
Cheers.
All that problem (odd behavior) is occurring due to this line -
.item {
float: left; /* THIS ONE */
border: 1px dotted grey;
}
you need to find some other alternative for those text blocks to align. You can use display: table-cell instead of float, but that makes the blocks go out of #content
I'll update my answer if I find any alternative.
Give position:static for the parent and then try
.parent {
border: 1px solid yellow;
position: static;
width: 100px;
}
.inner {
border: 1px solid red;
max-width: 200px;
position: absolute;
}
This is expected behaviour. The max-width value of .inner is not reached because it is limited by the width of .parent and the floated .items will only be on the same row until they hit the right edge of the containing element.
One way around this issue is to use a pseudo element to achieve a similar bordered result without the restrictive width:
Remove width from .parent, this will cause it to take up 100% of the width as it is a block level element. Remove border: 1px solid yellow; as it will no longer have the desired result
Create a new pseudo element .parent:before. Set border: 1px solid yellow; and width: 100px; to show the yellow border on this instead
Set .parent:before to be position: absolute; and have height: 100%; to position it relatively .parent and get it to fill the correct area
Now that .inner is not restricted by the width of .parent it should abide by the max-width: 200px; rule.
.parent {
position: relative;
}
.parent:before {
border: 1px solid yellow;
content: "";
display: block;
height: 100%;
position: absolute;
width: 100px;
}
.inner {
border: 1px solid red;
max-width: 200px;
position: absolute;
}
.item {
border: 1px dotted grey;
float: left;
}
<div class='parent'>
<div>element</div>
<div class="inner">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>