I have a set of divs within a slider that are floated. and within these divs I would like to vertically center content, mainly text. I tried something like this but it doesn't work:
<div class="floated">
<div class="table">
<div class"table-cell">
<p>text</p>
</div>
</div>
</div>
.floated{
float:left;
}
.table{
display:table;
vertical-align:middle;
height:100%;
}
.table-cell{
display:table-cell;
}
IMPORTANT: I can't set the height of any parent elements!
.floated { float:left; }
.table { display:table; height:100%; }
.table-cell { display:table-cell; vertical-align:middle; }
<div class="floated">
<div class="table">
<div class="table-cell">
<p>text</p>
</div>
</div>
</div>
vertical-align is on table-cell not table
you missed "=" at this line <div class"table-cell">
your div has a typo and try adding a margin to your table display
<div class="floated">
<div class="table">
<div class="table-cell">
<p>text</p>
</div>
</div>
</div>
.floated{
float:left;
}
.table{
display:table;
vertical-align:middle;
height:100%;
margin: 0 auto;
}
.table-cell{
display:table-cell;
}
Related
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
I need to have three divs in a row and fourth div displayed below these divs.
See the layout http://i.imgur.com/k3TFW6b.jpg (just illustration)
I've tried to use display block for the parent div mixed with display inline/inline-block for these three divs and some other settings but it always breaks first row and displays these divs in block.
Do you have any idea how to fix this?
Thanks.
Instead of using display:inline on a div, a simpler solution might be using the float property in CSS. With the help of adding a width and height we can make complex layouts:
html, body{
margin:0; padding:0;
height:100%;
}
body{
background:#48c;
}
#container{
height:50%;
width:50%;
margin:auto;
}
.rect{ float:left; height:100%; }
#box1{ width:50%; background:#999; }
#box2{ width:25%; background:#666; }
#box3{ width:25%; background:#333; }
#box4{ width:100%; background:#000; }
<body>
<div id="container">
<div class="rect" id="box1"></div>
<div class="rect" id="box2"></div>
<div class="rect" id="box3"></div>
<div class="rect" id="box4"></div>
</div>
</body>
Simple and effective Solution would be CSS Table layout
HTML
.Row
{
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 7px;
}
.Column
{
display: table-cell;
background-color: gray;
}
<div class="Row">
<div class="Column">First</div>
<div class="Column">Second</div>
<div class="Column">Third</div>
</div>
<div class="Row">
<div class="Column">Fourth</div>
<div class="Column">Fifth</div>
<div class="Column">Sixth</div>
</div>
Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.
However if I use float:left and float:right twice, I get the following:
ELEMENT ELEMENT
ELEMENT ELEMENT
rather than
ELEMENT ELEMENT
ELEMENT ELEMENT
This is because, when I float for the second time the css floats for the remaining space left.
How do I fix this bug?
You can use clear:both; with float:left; property.
Try Jsbin demo
.left {
float:left;
width:40%;
height:240px;
border:1px solid red;
}
.right {
float:right;
width:40%;
border:1px solid red;
height:240px;
}
.elem1 {
float:left;
margin-bottom:20px;
}
.elem2 {
float:left;
clear:both;
}
.elem3 {
float:left;
margin-bottom:20px;
}
.elem4 {
float:left;
clear:both;
}
<div class="left">
<div class="elem1">element 1</div>
<div class="elem2">element 2</div>
</div>
<div class="right">
<div class="elem3">element3</div>
<div class="elem4">element4</div>
</div>
What you need is a clear: both in your CSS.
Your floats are working fine, but there is not enough content to push the next elements below the first elements. If you set them to clear, then they will.
Try this one:
Markup:
<div class='clear:both'>
<!-- left container -->
<div style = "float:left;">
<div style = "float:left;">
Element
</div>
<div style = "float:left; clear:left;">
Element
</div>
</div>
<!-- right container -->
<div style = "float:right">
<div style = "float:right;">
Element
</div>
<div style = "float:right; clear:right;">
Element
</div>
</div>
Please use your own external style, this is just to guide you.
Please have a look here on jsfiddle
.wrapper {
height:100px;
border:1px solid red;
margin: 5px;
}
.left {
margin: 10px;
float:left;
width: 45%;
}
.right {
margin: 10px;
float:right;
width: 45%;
}
<div class="wrapper">
<div class="left">element 1</div>
<div class="right">element 2</div>
</div>
<div class="wrapper">
<div class="left">element3</div>
<div class="right">element4</div>
</div>
This works for me.
.right {
float:right;
}
.left {
float:left;
}
<div>
<div class="right">1 element</div>
<div style="clear:both"></div>
<div class="right">1 element</div>
<div class="left">1 element</div>
<div style="clear:both"></div>
<div class="left">1 element</div>
</div>
Here is the fiddle. http://jsfiddle.net/nQvEW/143/
I'm trying to align a few divs into this structure but nothing is working.
<div>
<div>top</div>
<div>middle
<div>left</div> <div>right</div>
</div>
<div>bottom</div>
</div>
Ive tried using floats with abosolutes, blocks, etc closest im getting is with block-inline but the div which i need aligned right just sits up close to the left div,ived add text-align right with no joy.
Many Thanks
D
try this
<div>
<div>top</div>
<div>
<div style="float:left;">left</div>
<div style="float:left;">right</div>
</div>
<div style="clear:both;">bottom</div>
</div>
the bottom div with clear:both is probably not enough but does the trick in this particular example
google clearfix for this
Give the left and right div a width and let them float
Make sure you also clear the float by adding an extra div below with: clear: both;
Code:
<div id="wrap">
<div id="top">top</div>
<div id="mid">
<div id="left">left</div>
<div id="right">right</div>
<div class="clear"></div>
</div>
<div id="bot">bottom</div>
</div>
CSS:
div {
background: #ccc;
height: 15px;
margin-bottom: 10px;
}
.clear {
clear: both;
}
#wrap {
width: 400px;
}
#top {
}
#mid {
}
#left {
float: left;
width: 200px;
}
#right {
float: left;
width: 200px;
}
#bot {
}
See code in action: http://jsfiddle.net/GZg6y/
you can do this in different ways, one through float css property, make sure you specify the width as in this example:
<div class="container">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div> <div class="right">right</div>
</div>
<div class="bottom">bottom</div>
and your css should look like this:
.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}
see here http://jsfiddle.net/M3met/1/