how to set three div arranged horizontally like this?
The left one width:150px, the right one width:150px, the center one width are the rest of the pixels, and the center one min-width will be 800px. All the div need a position:relative.
Thanks.
Here we go, html is below:
<div id="wrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clearBoth"></div>
</div>
and now css below:
#wrap {
width: auto;
position: relative;
}
.left, .right {
width: 150px; //or use 30%
float: left;
}
.center {
float: left;
min-width: 800px; //or use 60%
width: auto;
position: relative;
}
.clearBoth {
clear: both;
}
Use a wrap if you want to define a fixed maximum width.
.wrap {
overflow:hidden;
width:1200px; /* Optional */
}
.left {
float:left;
width:150px;
}
.middle {
float:left;
min-width:800px;
}
.right {
float:left;
width:150px;
}
<div class="wrap">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>
Related
is it possible to have 2 different images in one line and scale them exactly the same? Lets say i have something like this:
.container {
max-width:1200px;
margin:0 auto;
overflow:hidden
}
.left {
float:left
width:70%;
}
.right {
width:30%
float:right;
}
<div class='container'>
<div class='left'>
img here
</div>
<div class='right'>
img here
</div>
</div>
Now I'd like to fit images with container's width. Then when decreasing the size of the browser i want to scale em both with the same height. Can i achive that?
I'm thinking about something like this: http://prntscr.com/h0j2lj
It is not quite clear from your description what effect you're trying to achieve, so this example may not be relevant with your actual task. Piece of code blow displays to images one by one with 70/30 ratio and scales them. Images are put on background so they may not be completely visible in every layout.
.container {
max-width:1200px;
margin:0 auto;
display: flex;
align-items: stretch;
justify-content: space-between;
}
.left, .right {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 200px;
}
.left {
flex: 7 7 70%;
}
.right {
flex: 3 3 30%;
}
<div class='container'>
<div class='left' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4d/Bees_Collecting_Pollen_cropped.jpg)">
</div>
<div class='right' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5d/Crateva_religiosa.jpg)">
</div>
</div>
This shows the same image scaled for 70% on the left and 30% on the right.
.container {
max-width:1200px;
margin:0 auto;
overflow:hidden
}
.left {
float:left;
width:70%;
}
.left img{
width: 100%;
}
.right {
width:30%;
float:left;
}
.right img{
width:100%;
}
<div class='container'>
<div class='left'>
<img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
</div>
<div class='right'>
<img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
</div>
</div>
I have two divs in my page and I would like both to have its width and height set to the width and height of the browser, so that I have to scroll down to see the second div.
How is this possible?
Eidt: I forgot to mention that I also want the content in these divs to be vertically centered.
What I did until now is taking this links first answer and put that code into another div, which takes 100% of the height.
Here is what I have at the moment:
HTML:
<body>
<div id="first"><div class="outer"><div class="middle"><div class="inner"><h1>Title 1</h1></div></div></div></div>
<div id="second"><div class="outer"><div class="middle"><div class="inner"><h1>DTitle 2</h1></div></div></div></div>
</body>
CSS:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 100%;
}
#first, #second {
height: 100%;
}
h1 {
text-align: center;
}
You can do something like:
HTML
html, body { height:100%; }
.box { height:100%; }
.one { background:#eee; }
.two { background:#ccc; }
CSS
<div class="box one">1</div>
<div class="box two">2</div>
JSFiddle Demo
I have 3 divs in one row
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
here's how its layed out
I need the middle div to stay a fix width, but the left and right divs to shrink in as the screen gets smaller, heres an example
how would I write out the css?
this is how I have it so far, and by the way the 3 divs are wrapped in another div#mid
#mid {
max-width: 100%;
min-height: 395px;
max-height: 395px;
position: relative;
background-color: #F00;
display: block;
}
#left {
min-width:35%;
min-height: 395px;
max-height: 395px;
background-color: #00F;
position:relative;
float: left;
}
#middle {
min-width:30%;
min-height: 395px;
max-height: 395px;
background-color: #3F0;
position:relative;
float: left;
}
#right {
min-width:35%;
min-height: 395px;
max-height: 395px;
margin:0;
padding:0;
background-color: #0FF;
position:relative;
float: left;
}
if anyone can help me out id really appreciate it, thanks in advance!
Here I've answered this question, you can do it like this : My Fiddle
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 300px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
Its very simple give fixed width to the middle div like width:300px...Hope this will be useful...
Very Simple.
Float the three divs.
Set the display property to 'inline-block'.
Set the width attribute of middle div.
Set max width attribute of the left & right div.
Here is the HTML markup I have tested with:
<body>
<div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
<div id="middle"></div>
<div id="right">
RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
</div>
</body>
Here is a sample CSS:
#right,
#left {
background-color:green;
float:left;
display:inline-block;
max-width:20%;
min-height:20px;
}
#middle {
width: 60%;
float:left;
display:inline-block;
background-color:blue;
min-height:20px;
}
And here is the implementation: http://jsfiddle.net/3yEv3/
I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.
It should look something like this:
[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]
The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.
Thanks!
I think this may work for you:
http://jsfiddle.net/KR9zj/
Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.
Use display:table; and display:table-cell;. No need to struggle with float:x;.
HTML:
<div id='container'>
<div id='first'>a</div>
<div id='second' class='fifty'>b</div>
<div id='third' class='fifty'>c</div>
</div>
CSS:
#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }
Live example: http://jsfiddle.net/j25wK/
Will this work?
Demo: http://jsfiddle.net/BVhCZ/
As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px
Code:
<div class="left">LEFT</div>
<div class="content">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
.left {
position: absolute;
top: 0;
left: 0;
width: 40px;
background-color: #ddd;
}
.content {
margin-left: 40px;
}
.content .content-left {
float: left;
width: 50%;
clear: none;
background-color: #fdd;
}
.content .content-right {
float: right;
width: 50%;
clear: none;
background-color: #ddf;
}
In CSS, I can do something like this:
http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png
But I've no idea how to change that to something like:
http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png
The height is not fixed
Please help me do it! Thank you all in advance!
I use this, pure css.
The html:
<div id="container" class="holder">
<div id="column-one" class="even-height">TEXT</div>
<div id="column-two" class="even-height">TEXT</div>
</div>
The css:
.holder {
overflow: hidden;
clear: both;
}
.holder .even-height {
float: left;
padding-bottom: 100000px;
margin-bottom: -100000px;
}
#column-one { width: 30%; }
#column-two { width: 70%; }
The columns can be any width you want actually. Anyway, super simple and cross-browser friendly.
Variable height wrapper with equal-height columns
HTML
<section class="wrapper">
<section>a</section>
<aside>b<br>c</aside>
</section>
CSS
/* Set #max-column-height to greater than the maximum height of the tallest column */
.wrapper {
overflow:hidden;
margin:10px;
}
.wrapper > section {
background:red;
width:50%;
float:left;
padding-bottom:1000px; /* #max-column-height */
margin-bottom:-1000px; /* #max-column-height */
}
.wrapper > aside {
background:orange;
width:50%;
float:left;
padding-bottom:1000px; /* #max-column-height */
margin-bottom:-1000px; /* #max-column-height */
}
I like broh's/manonatelier's better (+1 to each), but if you really want a solution that is utterly independent of the amount of content inside, I would use the old technique of design 'hooks': http://jsfiddle.net/GTY8P/
...Uses more markup and CSS.
Make a wrapper with a div like this :
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
Apply a style like that :
.wrapper {
height: 400px;
}
.wrapper .box{
float: left;
height: 100%;
width: 200px;
background-color: red;
margin-right: 10px;
}
Didn't try, but will work.
EDIT jsFiddle : http://jsfiddle.net/NXjk4/
Check this
HTML
<div class="box" >
<div class="box1">TEXT</div>
<div class="box2">TEXT</div>
</div>
CSS
.box{
background:#000;
height:60px
}
.box1{
float: left;
background-color: #fff;
margin: 10px;
text-align:center;
}
.box2{
float: left;
background-color: red;
margin: 10px;
margin-left:5px;
text-align:center;
}
See the demo here : http://jsfiddle.net/X3UY9/1/