I've got a wrapper with a max-width of 1400px. In this div are two img elements width different sizes. I'd like to float them in a row using flexbox. They should fit in in the 1400px width and still look good, so they have to be scaled like in the picture (red border is the div with 1400px max-width). How can I solve this? I hope it's clear enough.
.wrapper {
display: flex;
max-width: 1400px;
margin: 0 auto;
border: 1px solid black;
}
img {
width: 100%;
display: block;
}
<div class="wrapper">
<img src="https://dummyimage.com/hd1080">
<img src="https://dummyimage.com/vga">
</div>
You can wrap image inside div and adjust the flex property to make one bigger than the other like this :
.wrapper {
display: flex;
max-width: 1400px;
width:100%;
margin: 0 auto;
border: 1px solid red;
}
.first {
height:300px;
flex:2;
position:relative;
border:1px solid #000;
}
.second {
height:300px;
flex:1;
position:relative;
border:1px solid #000;
}
img {
position:relative;
height:100%;
width:100%;
}
<div class="wrapper">
<div class="first">
<img src="https://dummyimage.com/hd1080">
</div>
<div class="second">
<img src="https://dummyimage.com/vga">
</div>
</div>
Related
How do I make this layout with CSS? The parent div is set to max-width 1500px and it is a display flex and a gap 18px with two children #text, #news... news is overlapping to touch the right edge of whatever screen the user has.
html{
border:1px solid red;
}
html:after{
content:"HTML";
color:gray;
}
.main{
display:flex;
flex-flow:row;
max-width:350px;
color:black;
}
.main .child-1 {
flex: 1 1 40%;
border:1px solid #000
}
.main .child-2 {
flex: 1 1 100vw;
border:1px solid #000;
}
.main ul p {
display:block;
width 250px; // Whatever
}
ul{
list-style:none;
display:flex;
}
<div class="main">
<p class="child-1">Some lorem Text</p>
<div class="child-2">
<ul>
<li><p>1</p></li>
<li><p>2</p></li>
<li><p>3</p></li>
<li><p>4</p></li>
</ul>
</div>
</div>
you can use negative margin to achieve the goal.
div{
border: 1px solid;
min-height: 100px;
}
.parent{
display: flex;
max-width: 250px;
padding: 20px;
column-gap: 20px;
}
.text{
width: 25%;
}
.news{
width:75%;
margin-right: -20px;
}
<div class="parent">
<div class="text"></div>
<div class="news"></div>
</div>
In the snippet below, I want the "title" div to size itself based on its content, so I don't have to specify a width. That bit is obviously working already. I then want the "rightside" div to take the remaining space and right align itself - at the moment it just sits next to the title div.
And of course I don't want to use floats because that messes up everything and we have a no floats policy here.
Based on reading other threads I thought adding an overflow:hidden to one of the parents would make it do this but I can't get it working.
I don't want to specify a width for either div but it will always be the case that one of the parents will have a width specified, so in this case I've set it on the "outer" element.
So how do we get "rightside" to appear to the right of the red box ? thanks
.outer {
width:500px;
border:1px solid red;
}
.outer div {
display:inline-block;
border:1px solid green;
}
.rightside {
width:auto;
text-align: right;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
you should use flexbox or grid to solve this kind of problems its easy and fast
flex example
.outer {
width:500px;
border:1px solid red;
}
.inner {
display:flex;
flex-direction:row;
justify-content:space-between;
}
.outer div {
/* display:inline-block; */
border:1px solid green;
}
.rightside {
width:auto;
text-align: right;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
and grid
.outer {
width:500px;
border:1px solid red;
}
.inner {
display:grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
justify-content:space-between;
}
.outer div {
/* display:inline-block; */
border:1px solid green;
}
.rightside {
width:auto;
text-align: right;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
Flexbox will help!
.outer {
width: 500px;
border: 1px solid red;
}
.outer .title,
.outer .rightside {
display: inline-block;
border: 1px solid green;
}
.inner {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="outer">
<div class="inner">
<div class="title">
Autosize this section based on content
</div>
<div class="rightside">
Right align this
</div>
</div>
</div>
If you would like the rightside to fill the rest of the space, you could use flexbox and flex-grow, like this:
.inner {
display: flex;
justify-content: space-between;
}
.inner div {
display:inline-block;
border:1px solid green;
width: auto;
flex-grow: 1;
}
.rightside {
width:auto;
text-align: right;
}
With flexbox, you only need to set display: felx; for the parent element, and margin-left: auto; for the rightside (child) element :
div {
border: 2px dotted silver;
padding: .5em;
}
/* ---------------- */
.parent {
display: flex;
}
.rightside {
margin-left: auto;
}
<div class="parent">
<div>
Child 1
</div>
<div class="rightside">
Child 2
</div>
</div>
I am a new learner in web designing and practicing websites. I want to align 2 divs in one line without using float. I have a parent div with width 1400px. I want 2 child divs of width 600px each to align next to each other and have equal margin from both sides. Below is my code. Please suggest.
Also, what changes does float make to DOM? I observed that if I use float I need to specify the height as well? Is it the case or I was making some mistake in understanding the role of float?
<html>
<head>
<title>
My Page
</title>
</head>
<body>
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
</body>
</html>
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: inline-block;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
}
you can do like this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.child1 {
background-color: #666;
width: 600px;
margin: auto;
display: inline-block;
}
.child2 {
background-color: #888;
width: 600px;
margin: auto;
display: inline-block;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Or you can Improve you css to this.
.main {
width: 1400px;
background-color: #c3c3c3;
position: relative;
text-align: center;
}
.main div {
display: inline-block;
width: 600px;
margin: auto;
}
.main div.child1 {
background-color: #666;
}
.main div.child2 {
background-color: #888;
}
<div class="main">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
You can use flexbox like this:
.main {
display: flex;
justify-content: space-between;
}
Can be done with:
.main div { display: inline-block; }
Expect a whitespace between the divs.
This should do the trick (at least roughly):
.main{
width:1400px;
background-color:#c3c3c3;
position: relative;
display: table-row;
}
.child1{
background-color:#666;
width: 600px;
margin:auto;
display: table-cell;
}
.child2{
background-color:#888;
width : 600px;
margin:auto;
display: table-cell;
}
Float is really intended to put a picture (or a similar element) on one side of the page and have the text flow around it. It's often "abused" to pack elements next to each other horizontally, but that creates its own problems.
A lot of the answers you've been given are good, and people have been doing this since CSS became a thing. Another way you can do it, and really whichever method you'd like depends solely on your circumstances is by using position:relative on the parent wrapper, and position:absolute any the child elements.
.wrapper {
border: 1px solid red;
min-height: 50vh;
min-width: 100vw;
position: relative;
}
.wrapper > div {
position: absolute;
}
.wrapper .first {
top: 0;
left: 0;
width: 48vw;
border:1px dotted green;
height:100%;
}
.wrapper .second {
top: 0;
right: 0;
width: 48vw;
border:1px dashed orange;
height:100%;
}
<div class="wrapper">
<div class="first">
This is content number 1
</div>
<div class="second">
This is content number two.
</div>
</div>
Another way is by setting the container div to display as a row, and then have the two child elements be displayed as table cells. Tables were kind of the old-go-to back before CSS became extensive (can you believe there was a time before border-radius?)
.wrapper {
display: table-row;
background-color: red;
width: 100%;
height: 50vh;
}
.wrapper > div {
display: table-cell;
width: 48%;
}
.first {
border: 1px solid orange;
}
.second {
border: 1px dotted green;
}
<div class="wrapper">
<div class="first">
First Child
</div>
<div class="second">
Second Child
</div>
</div>
Really there's a bunch, you just need to figure out which one works best for you.
I am having a weird situation with the code below, my body width is set to 980px and my header and content width is set to 100% so they should stretch throughout screen but in firefox they fall short by few pixels and in chrome they just reach the half way, the weird thing is body of page is covering whole screen I checked it by setting background:black for body and whole page turned black then how header and content can fall short with width:100% .But this code works fine on cssdesk cssdesk so what is wrong with my browsers. My screen resolution is 1366x768.
body {
width: 980px;
margin: 0;
background-color: #000;
}
.header {
color: #fff;
margin: 0;
width: 100%;
height: 60px;
background-color: #F23F21;
}
#container {
width: 100%;
}
.one {
height: 200px;
float: left;
border: 1px solid red;
width: 25%;
box-sizing: border-box;
}
.two {
height: 200px;
display: inline-block;
border: 1px solid blue;
box-sizing: border-box;
width: 50%;
}
.three {
height: 200px;
float: right;
border: 1px solid green;
box-sizing: border-box;
width: 25%;
}
<body>
<div class="header">This is header</div>
<div id="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
</body>
The body is not stretching to fill the screen. There are just special rules for how the background colour is handled on the body element (it is used to colour the viewport itself).
The body is the width you gave it. That width is narrower than your browser window.
Everything else is constrained within it.
Dont fix width of your body, inside body create a container div
i have modified your code check this
<style>
body{}
.container{
width:980px;
margin: 0;
background-color: #000;
}
.header{
color:#fff;
margin: 0;
width:100%;
height: 60px;
background-color:#F23F21;
}
#container{
width:100%;
}
.one{
height:200px;
float:left;
border:1px solid red;
width:25%;
box-sizing: border-box;
}
.two{
height:200px;
display:inline-block;
border:1px solid blue;
box-sizing: border-box;
width:50%;
}
.three{
height:200px;
float:right;
border:1px solid green;
box-sizing: border-box;
width:25%;
}
</style>
<body>
<div class="container">
<div class="header">This is header</div>
<div id="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
</div>
</body>
I have the following code:
HTML:
<div class="main">
<div class="myClass1">
</div>
<div class="myClass2">
</div>
<div class="myClass3">
</div>
<div class="myClass4">
</div>
</div>
CSS:
.main {
width:100%;
height:100px;
background-color:#000;
}
.myClass1 {
height: 100px;
width:200px;
background-color: blue;
display: inline-block;
}
.myClass2 {
height: 100px;
width:200px;
background-color: yellow;
display: inline-block;
}
.myClass3 {
height: 100px;
width:200px;
background-color: red;
display: inline-block;
}
.myClass4 {
height: 100px;
width:200px;
background-color: yellow;
display: inline-block;
}
JSFiddle: http://jsfiddle.net/a2whdvmw/
I want them all aligned to the right of main, but as I resize the window, at some point myClass1 will reach the left edge of main and I want myClass3 to squeeze between myClass2 and myClass4 from that point on.
myClass1, myClass2 and myClass4 all have fixed size. So when I resize the window, the only width I want to change is the one of myClass3.
Is it possible to do this with CSS only?
Use flex layout.
Specify flex: 0 1 200px for your .myClass3. This will cause it not to grow but still allow shrinking from a flex-basis width of 200px. For the rest, specify a flex: 0 0 200px to disallow both expanding and shrinking, effectively fixing those at 200px, as the .myClass3 shrinks with the decrease in available space.
Demo Fiddle: http://jsfiddle.net/abhitalks/a2whdvmw/1/
Demo Snippet:
.main { width:100%; height:100px; background-color:#000; display: flex;}
.myClass1 {
flex: 0 0 200px;
height: 100px; background-color: blue;
}
.myClass2 {
flex: 0 0 200px;
height: 100px; background-color: yellow;
}
.myClass3 {
flex: 0 1 200px;
height: 100px; background-color: red;
}
.myClass4 {
flex: 0 0 200px;
height: 100px; background-color: yellow;
}
<div class="main">
<div class="myClass1"></div>
<div class="myClass2"></div>
<div class="myClass3"></div>
<div class="myClass4"></div>
</div>
Try media query..
#media only screen and (max-width: 1200px){
.myClass3{
width:10%;
}
}
Hope this helps..
Max width and width(%) can be change..