I want to give remaining width to .inner div. At the Same time it's siblings (a & span tags) can be of dynamic width.
Any idea?
Code below & at https://jsfiddle.net/pge8rqw0/
.top {} .inner {
border-bottom: 1px solid black;
background-color: green;
width: auto;
float: left;
width: 50px;
}
a {
float: left;
}
span {
float: right;
background-color: red;
}
<div class="top">
Visit W3Schools.com!
<div class="inner"></div>
<span>Html is good</span>
</div>
Thanks
Solution using display: flex.
.top {
display: flex;
}
.inner {
border-bottom: 1px solid yellow;
background-color: green;
min-width: 50px;
flex: 1;
}
a {
background-color: #f5f5f5;
}
span {
background-color: red;
}
<div class="top">
Visit W3Schools.com!
<div class="inner"></div>
<span>Html is good</span>
</div>
If you can change the order of elements in your code then you can achieve it without flex as follows:
.top {overflow: hidden;}
a {
float: left;
}
span {
float: right;
background-color: red;
}
.inner {
border-bottom: 1px solid black;
background-color: green;
overflow: hidden;
}
<div class="top">
Visit W3Schools.com!
<span>Html is good</span>
<div class="inner">Inner Content</div>
</div>
Related
I would like the button to be positioned at the bottom right of the red colored div. I used padding-bottom and margin-bottom properties but that does not seem to work. Could anyone please help?
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
.button {
float: right;
position:relative;
transform:translate(-5px,-25px); //x and y controls
}
I have just answered the same thing to other question. ... Use position:relative. I see the point why people refrain from using it. But really ain't no shame. Especially when there isn't a parent-child relation between the elements.
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
position:relative;
top: -22px;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
An alternative to the other answers using display: grid instead. This is easier for the browser than using position absolute or float!!
/* ignore */ body { margin: 0 } * { box-sizing: border-box } /* ignore */
.container {
display: grid;
width: 50vw;
height: 100vh;
border: 1px solid blue;
padding: 8px;
}
.box, .button { grid-area: 1/1/-1/-1 }
.box { border: 1px solid red }
.button { margin: auto 0 0 auto }
<div class="container">
<div class="box">
</div>
<div class="button">
<button>Click</button>
</div>
</div>
I'm doing a simple exercise with margin and padding, it should look something like this:
I tried to do it by setting the padding of the outer div to a fix value and setting the margin of the inner div to 0. But my result looks like this:
Inspector in google shows a margin to the right of the inner div, I have no idea where it comes from.
Here are the html and css codes
#box1,
#box2,
#box3,
#box4 {
width: 200px;
height: 200px;
border-width: 4px;
border-style: solid;
margin: 8px;
/* Aufgabe 2 */
display: inline-block;
/* Aufgabe 3 */
padding: 50px;
}
#box1 {
border-color: red;
}
#box2 {
border-color: green;
}
#box3 {
border-color: violet;
}
#box4 {
border-color: yellow;
}
#inbox1,
#inbox2,
#inbox3,
#inbox4 {
width: 100px;
height: 100px;
/* Aufgabe 3 */
margin: 0px;
}
#inbox1 {
background-color: royalblue;
}
#inbox2 {
background-color: pink;
}
#inbox3 {
background-color: black;
}
#inbox4 {
background-color: turquoise;
}
<div id="box1">
<div id="inbox1"></div>
</div>
<div id="box2">
<div id="inbox2"></div>
</div>
<div id="box3">
<div id="inbox3"></div>
</div>
<div id="box4">
<div id="inbox4"></div>
</div>
Can someone explain where that margin comes from and how I can get rid of it?
It's not margin, it's just the size of your elements. Your boxes have an explicit width of 200px while the inboxes have an explicit width of 100px. So the extra space is due to that difference.
You should also use classes to share styles between elements:
.box {
border-width: 4px;
border-style: solid;
margin: 8px;
display: inline-block;
padding: 50px;
}
#box1 {
border-color: red;
}
#box2 {
border-color: green;
}
#box3 {
border-color: violet;
}
#box4 {
border-color: yellow;
}
.inbox {
width: 100px;
height: 100px;
margin: 0px;
}
#inbox1 {
background-color: royalblue;
}
#inbox2 {
background-color: pink;
}
#inbox3 {
background-color: black;
}
#inbox4 {
background-color: turquoise;
}
<div id="box1" class="box">
<div id="inbox1" class="inbox"></div>
</div>
<div id="box2" class="box">
<div id="inbox2" class="inbox"></div>
</div>
<div id="box3" class="box">
<div id="inbox3" class="inbox"></div>
</div>
<div id="box4" class="box">
<div id="inbox4" class="inbox"></div>
</div>
I believe your issue resulted from providing additional width and height, and padding in order to create a gap around the inner box - you should only use one of these methods!
The following code reduces the size of the parent to 100 x 100, and sets the size of the child to 100% of its parent. Then, the padding alone creates the gap:
.box {
width: 100px;
height: 100px;
border-width: 4px;
border-style: solid;
margin: 8px;
display: inline-block;
padding: 50px;
}
.box1 { border-color: red; }
.box2 { border-color: green; }
.box3 { border-color: violet; }
.box4 { border-color: yellow; }
.inbox {
width: 100%; height: 100%;
}
.inbox1 { background-color: royalblue; }
.inbox2 { background-color: pink; }
.inbox3 { background-color: black; }
.inbox4 { background-color: turquoise; }
<div class="box box1">
<div class="inbox inbox1"></div>
</div>
<div class="box box2">
<div class="inbox inbox2"></div>
</div>
<div class="box box3">
<div class="inbox inbox3"></div>
</div>
<div class="box box4">
<div class="inbox inbox4"></div>
</div>
You can center horizontally and vertically adding flexbox (modern solution) to each box container, if you want to support older browser see this.
As other answers suggested add classes to your css for better readability and more.
In addition be aware of the dimensions of the boxes.
Here is the solution:
#box1,
#box2,
#box3,
#box4 {
width: 200px;
height: 200px;
border-width: 4px;
border-style: solid;
margin: 8px;
/* Aufgabe 3 */
padding: 50px;
/* ADD THIS */
display: inline-flex;
justify-content: center;
align-items: center;
/* END ADD THIS */
}
#box1 {
border-color: red;
}
#box2 {
border-color: green;
}
#box3 {
border-color: violet;
}
#box4 {
border-color: yellow;
}
#inbox1,
#inbox2,
#inbox3,
#inbox4 {
width: 100px;
height: 100px;
margin: 0;
}
#inbox1 {
background-color: royalblue;
}
#inbox2 {
background-color: pink;
}
#inbox3 {
background-color: black;
}
#inbox4 {
background-color: turquoise;
}
<div id="box1">
<div id="inbox1"></div>
</div>
<div id="box2">
<div id="inbox2"></div>
</div>
<div id="box3">
<div id="inbox3"></div>
</div>
<div id="box4">
<div id="inbox4"></div>
</div>
Hope it helps :)
I've 5 divs in a single div, that I would make it floats 2 at left and 3 at right:
.container {
height: 400px;
border: 1px solid black;
}
.first, .second, .third, .fourth, .fifth {
width: 50%;
}
.first {
height: 300px;
background-color: red;
float: left;
}
.second {
height: 100px;
background-color: blue;
float: left;
}
.third {
height: 100px;
background-color: green;
float: right;
}
.fourth {
height: 200px;
background-color: yellow;
float: right;
}
.fifth {
height: 100px;
background-color: aquamarine;
float: right;
}
<div class="container">
<div class="first"> FIRST </div>
<div class="second"> SECOND </div>
<div class="third"> THIRD </div>
<div class="fourth"> FOURTH</div>
<div class="fifth"> FIFTH </div>
</div>
I would like that they were placed:
FIRST and SECOND at left
THIRD, FORTH and FIFTH at right.
Instead, they are placed like:
FIRST and FIFTH at left
SECOND, THIRD and FOURTH at right.
Do you know how fix it? Here there is my code: https://jsfiddle.net/82bkdbpn/
Since you have defined fixed height on container element you can use Flexbox to do this and define flex-direction: column.
.container {
height: 400px;
border: 1px solid black;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.first, .second, .third, .fourth, .fifth {
width: 50%;
height: 100px;
}
.first {
height: 300px;
background-color: red;
}
.fourth {
height: 200px;
background-color: yellow;
}
.second {background-color: blue;}
.third {background-color: green;}
.fifth {background-color: aquamarine;}
<div class="container">
<div class="first"> FIRST </div>
<div class="second"> SECOND </div>
<div class="third"> THIRD </div>
<div class="fourth"> FOURTH</div>
<div class="fifth"> FIFTH </div>
</div>
You can wrap the divs in Columns, and float these two. Or you can use flexbox, there is a very good answer from Nenad Vracar about this.
Here is an example with two column wrapper div elements:
.container {
height: 400px;
border: 1px solid black;
}
.col {
width: 50%;
float: left;
}
.first {
height: 300px;
background-color: red;
}
.second {
height: 100px;
background-color: blue;
}
.third {
height: 100px;
background-color: green;
}
.fourth {
height: 200px;
background-color: yellow;
}
.fifth {
height: 100px;
background-color: aquamarine;
}
<div class="container">
<div class="col">
<div class="first"> FIRST </div>
<div class="second"> SECOND </div>
</div>
<div class="col">
<div class="third"> THIRD </div>
<div class="fourth"> FOURTH</div>
<div class="fifth"> FIFTH </div>
</div>
</div>
I've recently gotten into the world of HTML/CSS and I am struggling with something.
I want to position the div's like this:
But the I only manage to it like this:
As you see, I want div 5 to be below Div 4, and next to div 3. But I only
Of course, I can wrap div 4 and div 5 in a new div, but I'd rather learn a better way of doing this.
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
float: left;
}
#innhold {
background-color: grey;
float: left;
}
#footer {
background-color: blue;
clear: both;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
I don't think that there is a better way to do so without wrapping in a DIV your Div 4 and 5. But in place of using float, you can specify a width to each div and display them as display : inline-block; (a bit better).
* {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
display: inline-block;
vertical-align: top;
}
#innhold {
background-color: grey;
}
#footer {
background-color: blue;
}
#wrapping {
display: inline-block;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="wrapping">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
Without wrapping, you can add a height (in PX, not in %) to your Div 3 so that Div 5 remain of the right. I don't really like this option...
* {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
float: left;
height: 50px;
}
#innhold {
background-color: grey;
float: left;
width: 90%
}
#footer {
background-color: blue;
float: left;
width: 90%
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
The problem is that you need to specify a static height for your sub-menu...
Going by the diagram you supplied:
#side-meny {
float:left
}
Make a new div containing #innhold and #footer, let's call it #right-container so you have
<div id="right-container">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
Then
#right-container {
float:right
}
See if that works.
Please use the following code which I have modified.
body {
background-color: yellow;
}
#banner {
background-color: green;
}
#topp-meny {
background-color: pink;
}
#side-meny {
background-color: violet;
display: inline-block;
vertical-align: top;
width: 25%;
}
#block {
display: inline-block;
vertical-align: top;
width: 74%;
}
#block p {
margin: 0;
}
#innhold {
background-color: grey;
}
#footer {
background-color: blue;
clear: both;
}
<div id="banner">Webutvikling</div>
<div id="topp-meny">Meny</div>
<div id="side-meny">
<p>sidemeny</p>
</div>
<div id="block">
<div id="innhold">
<p>innhold</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
in your css file you can set
#footer{
...
position:absolute;
left: (div3's width);
top: (div1+div2+div4 height)
}
i tried some codes but, no works anything.
would like make this with css, thanks =)
this code i tried, but doesn't work.
#left{
float:left;
width:65%;
overflow:hidden;
}
#right{
overflow:hidden;
}
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
i don{t know why this doesnt work.
A simple solution with no floats:
#main {
width: 200px; /* adjust as needed */
font-size: 0;
}
div div {
display: inline-block;
height: 60px; /* adjust as needed */
width: 100%;
box-shadow: inset 0 0 4px #000; /* cosmetics only */
background: #eee; /* cosmetics only */
}
div.h {
width: 50%;
}
<div id="main">
<div class="h"></div>
<div class="h"></div>
<div></div>
</div>
Note: using font-size: 0 for the container div to avoid the actual whitespace in the markup - can be avoided by removing spaces between elements, of course: <div>content here...</div><div>other one...</div>
Add float:left; to #right, then it should work. Note that you could also use float:right; to #right, then #right would be on the right side. Using float: left; for both displays both divs next to each other without any gap.
For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Try this script, I wrote it on JSfiddle:
http://jsfiddle.net/xb5vvpzn/1/
HTML
<div class="main">
<div class="top"> </div>
<div class="bottom1"> </div>
<div class="bottom2"> </div>
</div>
CSS
html, body {
padding:0;
margin:0;
}
.main {
width:400px;
border:1px solid #000;
height:400px;
padding:10px;
}
.main div {
display:inline-block;
}
.top {
width:396px;
border: 1px solid #cc0000;
height:100px;
}
.bottom1, .bottom2 {
margin-top:10px;
border: 1px solid #cc0000;
width:195px;
height:100px;
}
Here's a jsFiddle that I've quickly created for you. The layout is same as what you had requested and it's responsive as well.
HTML:
<div id="container">
<div id="onetwo">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="three"></div>
</div>
CSS:
#container {
width: 100%;
border: 3px solid blue;
padding: 1% 1%;
text-align: center;
}
#onetwo {
display: block;
width: 100%;
}
#one, #two {
width: 49%;
border: 3px solid red;
height: 50px;
display: inline-block;
}
#three {
width: 100%;
border: 3px solid red;
height: 50px;
}
#media (max-width: 820px) {
#one, #two {
width: 46%;
}
}
#media (max-width: 240px) {
#one, #two {
width: 40%;
}
}