I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/
I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.
.left {
background: green;
border: 1px solid blue;
float: left;
width: 90%;
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.
Pure css only please.
Simply use flex like this:
.container {
display: flex;
align-items: flex-start;
}
.left {
background: green;
border: 1px solid blue;
flex: 1; /* This will make your element fill the remaining space*/
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
You can use this CSS:
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.
https://jsfiddle.net/mLkjv565/1/
Use below css
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: auto;
border: 1px solid red;
float: left;
}
Please check it here. fiddle
Related
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I want to make all divs side by side.
I mean remove the space form top of the #div3 and #div4.
I tried float and display:inline-block
my code :
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
#div1 {
display: inline-block;
width:220px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:260px;
height:260px;
border: 1px solid green;
}
#div3 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
#div4 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
http://jsfiddle.net/u5y6tuwm/
One solution is to use flex in the parent container:
#wrapper {
display: flex;
/*set display to flex*/
margin-top: 20px;
}
#wrapper > div {
margin-right: 10px;
/*add some margin to the right to direct children div*/
}
#div1 {
width: 220px;
height: 120px;
border: 1px solid red;
}
#div2 {
width: 260px;
height: 260px;
border: 1px solid green;
}
#div3 {
width: 100px;
height: 160px;
border: 1px solid green;
}
#div4 {
width: 100px;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
vertical-align: top;
to each div1, 2, 3 and 4
you can add this to affect all divs on the page
div {
vertical-align: top;
}
or this for all divs within #wrapper div
#wrapper div {
vertical-align: top;
}
or this to target each div you want ( 1-4 )
#div1, #div2, #div3, #div4 {
vertical-align: top;
}
or to each one individually, or inline style and so on.
You just need to add
#div1, #div2, #div3, #div4 {
float:left;
}
This will work perfectly. Also do not forget to clear the float after
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I created the simple web page layout that includes : header, left, right and footer div blocks.
This is the html code:
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="body">
<div class="header">
<p>Header</p>
</div>
<div class="left">
<div class="article">
<p>Article 1</p>
</div>
<div class="article">
<p>Article 2</p>
</div>
<div class="article">
<p>Article 3</p>
</div>
</div>
<div class="right"></div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
This is the css style :
body {
margin: 0px;
}
.header {
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.left {
margin-top: 5px;
width: 1000px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
.article {
margin: 50px;
height: 400px;
border-style: solid;
border-color: green;
border-width: 5px;
border-radius: 3px;
}
.footer {
margin-top: 5px;
width: 1200px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
}
p {
text-align: center;
}
The web page looks like this:
But when i try to add the left block like on the picture it looks uncorrect. I use this css code for that:
.right {
margin-top: 5px;
width: 200px;
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 3px;
float: right;
}
DEMO on jsFiddle - http://jsfiddle.net/khbTg/
How can I to put Left div block in the yellow area like on the picture? Thank you for any help.
You just want to float .right to the right. If you can change your markup to:
<div class="header">#header</div>
<div class="container">
<div class="right">
<div class="nav">#nav</div>
</div>
<div class="content">
<div class="article">#article</div>
<div class="article">#article</div>
<div class="article">#article</div>
</div>
</div>
<div class="footer">#footer</div>
You would then want to add the styles:
.container { clear: both; }
.content { width: 80%; }
.right {
width: 20%;
float: right;
}
.content, .right {
margin: 0;
padding: 0;
}
Fiddle: http://jsfiddle.net/YDNsA/1/. I added .container to help clear things, as you don't want to float around .header or .footer. Remember to avoid putting a margin, padding or border on .right or .content.
Would you not need to put:
.left {
float: right;
}
When you use a float, the floated element is removed from document flow and 'floated' - following elements then flow around the floated element. To use a right float the way you wish, the right-floated element .right needs to appear in the DOM before the left element.
Alternatively, float your .left element left, and float your .right element left also - then they will layout correctly.
Don't forget to clear the floats afterwards :)
As a side-alternative, you could set .left and .right to display: inline-block; and this would solve your problem without floats and clears. You do need to then either (a) set font-size to 0 for the parent element to avoid the whitespace issue, or (b) comment out the whitespace between .left and .right. Google it if interested.
I make a a demo file how can you make a simple page layout:
Enjoy it PAGE LAYOUT EXAMPLE
CSS:
header {
width: 400px;
border: 2px solid black;
text-align: center;
margin-bottom: 5px;
}
article {
width: 300px;
height: 400px;
border: 2px solid black;
margin-right: 5px;
float: left;
}
sidebar {
width: 90px;
height: 400px;
border: 2px solid yellow;
float: left;
}
footer {
width: 400px;
border: 2px solid black;
text-align: center;
margin-top: 5px;
clear: both;
float: left;
}
I'm trying out a css challenge where the requirements state that:
Draw 2 squares of width 50px side by side
Each square should have a circle in the center with width of 10px
The distance between two squares should be 10px
I can't seem to make my circle appear.. Here's my fiddle - https://jsfiddle.net/xmozvs5p/
Here's a snippet of my css:
.square {
width:50px;
height:50px;
border:1px solid black;
display:inline-block;
margin:10px;
}
.circle{
background-color:green;
border-radius: 50%;
width:10px;
display:block;
margin:auto;
}
Add a height to the .circle element and it can be centered using flexbox on the parent.
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 10px 5px; /* 10px between elements */
}
.circle {
background-color: green;
border-radius: 50%;
width: 10px;
height: 10px;
display: block;
margin: auto;
}
<div class="square">
<div class="circle"></div>
</div>
<div class="square">
<div class="circle"></div>
</div>
You can also try this way with less of code:
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-block;
background:radial-gradient(circle at center,green 5px,transparent 6px);
margin: 10px 5px;
}
<div class="square">
</div>
<div class="square">
</div>