i need have 3 columns in one row. Column in center is fixed width, but left and right column must be fluid. Also I need open this page with Android and IE8. So it should works and with old browser.
What i need:
My try, but unsuccessful:
.left {
float: left;
width: 100%;
margin-left: -50%;
height: 230px;
background: url('left.png') no-repeat right top;
}
.center {
float: left;
margin-left: -62px;
background: #FDE95E;
width:123px;
height:123px;
background: url('center.png');
}
.right {
float: left;
width: 50%;
height:230px;
background: url('right.png') no-repeat left top;
}
HTML:
<div class="left"><br></div>
<div class="center"><br></div>
<div class="right"><br></div>
<div style="clear: both;"></div>
css
.left {
background: red;
float: left;
height: 500px;
width: calc(50% - 50px);
}
.center {
background: gray;
height: 500px;
width: 100px;
margin: auto;
}
.right {
background: red;
float: right;
height: 500px;
width: calc(50% - 50px);
}
html
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
<div style="clear: both;"></div>
http://jsfiddle.net/usb9sbje/
flexbox (caniuse) fixes this with ease if you don't want to use float.
What you need is a wrapper with display:flex;, set #center to a desired width and then your sides 50% width minus the width of the #center.
html, body {
height:100%;
margin:0;
}
#wrapper {
display:flex; /* Required. */
height:100%;
}
#left, #right {
background:blue;
height:100%;
width:calc(50% - 61px); /* 61 equals width of your #center divided by two. – Required. */
}
#center {
width:122px; /* Required. */
}
<div id='wrapper'>
<div id='left'>left</div>
<div id='center'>center</div>
<div id='right'>right</div>
</div>
Another way, without using calc()
.container {
position: relative;
}
.left, .right {
width: 50%;
box-sizing: border-box;
}
.left {
float: left;
padding-right: 50px;
}
.right {
float: right;
padding-left: 50px;
}
.inner {
background: red;
height: 500px;
}
.center {
background: gray;
height: 500px;
width: 100px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
html
<div class="container">
<div class="left"><div class="inner">Left</div></div>
<div class="right"><div class="inner">Right</div></div>
<div class="center">Center</div>
<div style="clear: both;"></div>
</div>
http://jsfiddle.net/usb9sbje/3/
Related
I'm attempting to have a static left div and have the right divs be scrollable. I'd like to be flexible so I set widths and heights to percentage basis.
Currently, when I scroll the left div scrolls with the right div, so when I reach the second right div in the stack, there is not left div associated to it.
I'd like for the left div to always remain and only the right divs to scroll.
HTML:
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
CSS:
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: static;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
You just have to set position: fixed for left div. Check code below.
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: fixed;
}
#clear {
clear: both;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div id="clear"></div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
you need the first in fixed position and the rest be margin-left at 50% ... if i understood:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.div-left {
background-color: darkblue;
height: 100%;
width: 50%;
margin: 0px;
position: fixed;
}
[class^="div-right"] {
background-color: yellow;
height: 100%;
margin-left: 50%;
}
.div-right-2 {
background-color: aqua;
}
<div class="div-left div-left-small">
</div>
<div class="div-right-1 div-right-1-small">
</div>
<div class="div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
Ok, I'm setting up a mini-page and I want it to be 100% scalable so I'm trying to use only %.
But I don't get the "items" to take the 33% width and distribute is over the 80% of "content".
What am I doing wrong?
body, html{
width: 100%;
height: 100%;
}
.menu{
width: 20%;
height: 100%;
background: #fff;
float: left;
}
.content{
width: 80%;
height: 100%;
background: #eee;
float: left;
}
.bottom{
position: absolute;
bottom: 0;
}
.item{
width: 33%;
float: left;
}
.red{background: red;}
.blue{background: blue;}
.green{background: green;}
<div class="menu">menu</div>
<div class="content">content
<div class="bottom">
<div class="item red">left</div>
<div class="item blue">mid</div>
<div class="item green">right</div>
</div>
</div>
Try like this: Demo
.content{
position: relative;
}
.bottom{
width:100%;
}
.item{
box-sizing:border-box;
}
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle
So i'm having a problem that is hard to explain. Here is the JSFiddle showing the problem :
http://jsfiddle.net/c9cwB/
CSS:
#container {
width: 400px;
height: 400px;
}
.div1 {
width: 50%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 50%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}
Html:
<div id="container">
<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
</div>
What I want to happen is for the blue box to sit right under the green box so it looks like a website dashboard.
How do I do this? You can change css/html to fix it.
You can float the .div3 right and add clear:left; to the .div2 to get the desired layout (You can remove the display property as it is of no use combined with floats).
I also simplified your CSS code by adding a class to both left divs and using it to style them.
DEMO
HTML :
<div id="container">
<div class="div1 left"></div>
<div class="div3"></div>
<div class="div2 left"></div>
</div>
CSS :
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
.left {
float:left;
width: 50%;
height: 50%;
}
.div1 {
background: green;
}
.div2 {
background: blue;
clear:left;
}
.div3 {
width: 50%;
background: red;
height: 100%;
float: right;
}
You have to chage the float on your div3 class.
it should be float: right; instead of float: left;
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: right;
}
How about wrapping the ones you want to the left in another layer:
http://jsfiddle.net/dactivo/c9cwB/6/
<div id="container">
<div id="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="div3"></div>
</div>
/* Styles go here */
#container {
width: 400px;
height: 400px;
}
#wrapper{width:50%; display: inline-block;height:100%;float:left}
.div1 {
width: 100%;
display: inline-block;
height: 50%;
background: green;
float: left;
}
.div2 {
width: 100%;
height: 50%;
display: inline-block;
background: blue;
float: left;
}
.div3 {
width: 50%;
background: red;
display: inline-block;
height: 100%;
float: left;
}
Try Demo
<div id="container">
<div class="div3 right"></div>
<div class="div1"></div>
<div class="div2"></div>
</div>
Asumming that .widget is a item/box of the dashboard you can use:
.widget {
float: left;
}
.widget:nth-child(even) {
float: right;
}
Demo: http://codepen.io/torresandres/pen/wnIxF
I want to center a div element and to place another div element just on the right with the same vertical alignment. I don't know how to proceed without centering both elements.
Here is my code.
<div class="container">
<div class="center"></div>
<div class="right"></div>
</div>
.center {
width: 100px;
height: 100px;
margin: auto;
background-color: red;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
}
http://jsfiddle.net/KWsnh/
You could use calc to achieve this:
FIDDLE
.container{
text-align:center;
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
top:0;
left: calc(50% + 50px); // (100% - 100px)/2 + 100px (offset) = 50% + 50px
}
PS: Browser support for calc is quite good these days.
Demo Fiddle
HTML
<div class="container">
<div class='vcenter'>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
CSS
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
display:table;
}
.container {
display:table-cell;
vertical-align:middle;
}
.center {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: red;
}
.vcenter {
display:block;
width:100%;
position:relative;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
right:0;
top:0;
}