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>
Related
I have a container and 2 divs inside:
1 header (whose height should be free if I add some lines) and an userList.
I want the userList to have the height of the container : any idea how ?
(no JS solution, better if no position: asbolute used)
#container {
width: 300px;
height:400px;
background-color: #FF0000;
}
#header{
background-color: #FFF500;
}
#userList {
background-color: #00FF00;
width:290px;
height: 100%;
overflow-y:auto;
}
<div id="container">
<div id="header">line1<br>line2<br>line3</div>
<div id="userList">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
</div>
</div>
Right now, your .userList have the same height as his container, but with the yellow box it goes down. The best solution with your requirements is as this:
Your requirements:
no JS solution, better if no position: asbolute used)
#container {
width: 300px;
height:400px;
background-color: #FF0000;
}
#header{
width: 300px;
background-color: #FFF500;
}
#userList {
background-color: #00FF00;
width:290px;
height: 100%;
overflow-y:auto;
}
<div id="header">line1<br>line2<br>line3</div>
<div id="container">
<div id="userList">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
</div>
</div>
The only I need is take out the #header division and give it the same with as #container. By this mode, #container and #userList have got the same height.
One good way of doing this is with display: flex and flex-direction properties.
This way, you can have a header with flexible height, and a userlist that is always contained within the container. This way, you also don't have to change your markup and move the header outside your container.
Demo
Full code:
#container {
width: 300px;
height:400px;
background-color: #FF0000;
display: flex;
flex-direction: column;
}
#header{
background-color: #FFF500;
}
#userList {
background-color: #00FF00;
width:290px;
height: 100%;
overflow-y:auto;
}
<div id="container">
<div id="header">line1<br>line2<br>line3</div>
<div id="userList">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
</div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
How to center the text inside that box?
Here's how I want elements sorted out:
In a smaller screen, elements stack on top of each other, and the .text-box div, that contains the text I want to center, has a fixed height. For larger widths, the .text-box div should have a height igual to larger image's height minus shorter image's height
See the Fiddle here
HTML
<div id="wrapper">
<div class="box">
<img class="img-large" src="http://placekitten.com/900/800" alt=""/>
</div>
<div class="box">
<img src="http://placekitten.com/900/400" alt=""/>
</div>
<div class="box-text">
<div class="vcenter-outer">
<div class="vcenter-inner">
<p>center this text vertically</p>
</div>
</div>
</div>
</div>
CSS
#wrapper {
background: #ffeaea;
height: 100vh;
}
img {
width: 100%;
display: block;
}
.img-large {
height: 100vh;
width: auto;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
}
.box-text {
text-align: center;
background: yellow;
height: 100%;
}
#media only screen and (min-width: 768px) {
.box {
float: left;
width: 50%;
}
}
.vcenter-outer {
background: yellow;
display: table;
}
.vcenter-inner {
background: lightblue;
display: table-cell;
vertical-align: middle;
}
Why does the .text-box div span through the whole wrapper?
Basicly You could use display:flex and float together
.trio {
height:100vh;
width:100vh;
}
.trio>div {
float:left;
display:flex;
align-items:center;
justify-content:center;
width:50vh;
height:50vh;
box-shadow:inset 0 0 0 2px;
}
.trio .first {
height:100vh;
}
<div class="trio">
<div class="first">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
</div>
display:table works too with an extra level of div inbricated as you did , same idea: float + vh
codepen to play with
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/
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>