So I have a red bar inside a container which lies between two black boxes. The boxes are fixed in size while the red bar and the container are based on percentages.
My goal is to reduce the size of the container, as well as the red bar without the right black box breaking onto the next line. I was able to resolve the issue via custom mathematical calculations in JavaScript, but I want to keep functionality and design separate. I feel that there must be some way to solve this with CSS without hacks or extra div tags.
How can this be achieved?
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: 80%;
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
JSFiddle
CSS3 has a new flex display style supported by the major browsers.
.container {
display: webkit-flex;
display: flex;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
}
.bar {
width: 100%;
height: 100%;
background: red;
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
To set the box elements to a specific width use min-width rather than width
Use calc() in your CSS. It's from CSS3, but supported in all major browsers, even IE9.
.bar {
width: calc(100% - 60px);
}
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: calc(100% - 60px);
height: 100%;
background: red;
float: left
}
<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>
Try "table" layout
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container {
width: 80%;
height: 40px;
background: grey;
display: table;
}
.container > div {
display: table-row;
}
.container > div > div {
display: table-cell;
vertical-align: top;
}
.box {
height: 50%;
margin: 0 7px;
border: 15px solid black;
border-top: none;
border-bottom: solid 1px black;
/*float: left;*/
}
.bar {
width: 80%;
height: 100%;
background: red;
/*float: left*/
}
</style>
</head>
<body>
<div class="container">
<div>
<div>
<div class="box"></div>
</div>
<div class="bar"></div>
<div>
<div class="box"></div>
</div>
</div>
</div>
</body>
</html>
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>
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I drew this in microsoft paint and wanted to make this in html/css
The numbers labeled are the box numbers
This is what I've done to try to achieve this
html file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
</div>
</body>
</html>
css file
html, body {
margin: 0px;
height: 100%;
width: 100%;
}
#box1 {
border: solid black 3px;
height: 10%;
}
#box2 {
border: solid black 3px;
height: 3%;
}
#box3 {
border: solid black 3px;
height: 84%;
}
#box4 {
border: solid black 1px;
width: 50%;
height: 95%;
float: left;
margin: 5px;
}
#box5 {
border: solid black 1px;
width: 23%;
height: 25%;
float:left;
margin-left: 10px;
margin-top: 6px;
}
#box6 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
#box7 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
How it looks
I couldn't get box8 to show up on the right side I tried float right it messes it up. Also the boxes inside box3 are all inconsistent. If I full screen the boxes go right side. I used percentages for responsiveness but it didn't work. Anyone know how to do this ?
This can be achieved with flexbox - but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work.
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
.box-wrapper {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
#box1 {
padding:10px;
height:30px;
line-height:30px;
border: solid 1px red
}
#box2 {
height: 15px;
padding: 8px;
border: solid 1px blue
}
#box3 {
padding: 10px;
flex-grow:1;
display: flex;
flex-direction: row;
border: solid 1px green
}
#box4 {
flex-grow:2;
border: solid 1px orange
}
.middle-column {
flex-grow:1;
display: flex;
flex-direction: column;
}
.middle-column div{
flex-grow:1;
margin: 0 8px;
border: solid 1px #6e6e6e;
}
.middle-column div + div {
margin-top: 8px
}
#box8 {
flex-grow:1;
border: solid 1px black
}
<div class="box-wrapper">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">
<div id="box4">4</div>
<div class="middle-column">
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
</div>
<div id="box8">8</div>
</div>
</div
I'm looking for a html/css solution to obtain following behavior for some html element:
It must force a new-line after it, that is, no other element can be in the same line after it. Similar to a div or display: block.
Its size must be the one of his content, not expand to all line. Similar to a span or display: inline or display: inline-block.
We can choice the kind of element (div, span, ...) but it must be a single one, no possible to use, by example, a span followed of a br.
In the following example there are several tries to obtain this behavior, all them unsuccessful.:
body {
width: 200px;
}
#yellow {
height: 50px;
background-color: yellow;
border: 2px solid black;
}
#red {
height: 50px;
background-color: red;
border: 2px solid black;
display: inline-block;
}
#blue {
height: 50px;
background-color: blue;
border: 2px solid black;
display: inline-block;
}
.child {
width: 50px;
}
<!DOCTYPE html>
<html>
<body>
<div id="yellow">
<div class="child"></div>
</div>
<div id="red">
<div class="child"></div>
</div>
<div id="blue">
<div class="child"></div>
</div>
</body>
</html>
The yellow div expands over all line width, exceeding the 50px of its content. The red one ( a div with display inline-block) has the correct size, but doesn't forces next div (the blue one) to appear in next line.
Can you use max-width: fit-content? Not supported on IE or Edge.
body {
width: 200px;
}
#yellow {
height: 50px;
background-color: yellow;
border: 2px solid black;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
#red {
height: 50px;
background-color: red;
border: 2px solid black;
display: inline-block;
}
#blue {
height: 50px;
background-color: blue;
border: 2px solid black;
display: inline-block;
}
.child {
width: 50px;
}
<!DOCTYPE html>
<html>
<body>
<div id="yellow">
<div class="child"></div>
</div>
<div id="red">
<div class="child"></div>
</div>
<div id="blue">
<div class="child"></div>
</div>
</body>
</html>
You can apply display: table to #yellow as display: table acts as an inline-block element by being as wide as its content, but also acts as a block element by adding a line break before and after the element.
body {
width: 200px;
}
#yellow {
display: table;
height: 50px;
border-collapse: separate; /** added to allow padding to apply if used **/
background-color: yellow;
border: 2px solid black;
}
#red {
height: 50px;
background-color: red;
border: 2px solid black;
display: inline-block;
}
#blue {
height: 50px;
background-color: blue;
border: 2px solid black;
display: inline-block;
}
.child {
width: 50px;
}
<div id="yellow">
<div class="child"></div>
</div>
<div id="red">
<div class="child"></div>
</div>
<div id="blue">
<div class="child"></div>
</div>
Personally, I don't recommend using table based designs as they're not responsive, but due to your requirements I use so you don't have to use any other element and also it's supported by all the major browsers.
Hope this helps. Small change to the original body width and making the display for Yellow to be inline-block will make it work.
body {
width: 50px;
}
#yellow {
height: 50px;
background-color: yellow;
border: 2px solid black;
display: inline-block;
}
#red {
height: 50px;
background-color: red;
border: 2px solid black;
display: inline-block;
}
#blue {
height: 50px;
background-color: blue;
border: 2px solid black;
display: inline-block;
}
.child {
width: 50px;
}
<!DOCTYPE html>
<html>
<body>
<div id="yellow">
<div class="child"></div>
</div>
<div id="red">
<div class="child"></div>
</div>
<div id="blue">
<div class="child"></div>
</div>
</body>
</html>
How do I align multiple Inline-block div's above each other if a larger div is to the left like so:
EXAMPLE
I'm trying to make the two boxes go below the other two, but they place them self below the larger div.
HTML:
<div class="container">
<div class="big"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.container{
border: 1px black solid;
width: 320px;
height: 150px;
text-align:center;
}
.box{
display: inline-block;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
vertical-align:top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
}
Any idea how I would accomplish this?
EDIT: I'm aware this can be done by floating everything to the left. However, I would still like to keep the centre alignment from the main container.
Add float:left to both the classes. Include the child wrapping div.
.child_wrapper{
display: inline-block;
width: 100%;
height: 150px;
margin:0 8%
}
.box{
display: inline-block;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
vertical-align:top;
float:left
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
float:left
}
DEMO Updated
Add float:left in .big class of your css. And if you remove the margin then add float:left in .box class also.
WORKING LINK
HTML:
<div class="container">
<div class="big"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.container{
border: 1px black solid;
width: 320px;
height: 150px;
text-align:center;
}
.box{
display: inline-block;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
vertical-align:top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
float:left
}
There is no need to use display:inline-block; Just only float:left do the trick.
.box{
float:left;
width: 20%;
height: 30%;
border: 1px black solid;
background: blue;
}
.big {
float:left;
border: 1px black solid;
width: 40%;
height: 60%;
background: beige;
}
Working Fiddle
I have outer div and inner div. I need to place inner div at the bottom of the outer one.
Outer div is elastic (width: 70% for example). I also need to center inner block.
Simple model of described make-up is shown on the picture below:
Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
height: 100px; position: relative;'>
Outer
<div style='background-color: green;
position: absolute; left: 0; width: 100%; bottom: 0;'>
<div style='background-color: magenta; width: 100px;
height: 30px; margin: 0 auto; text-align: center'>
Inner
</div>
</div>
</div>
</body>
</html>
Live version here: http://jsfiddle.net/RichieHindle/CresX/
You need a wrapping div for the bottom one, in order to center it.
<style>
/* making it look like your nice illustration */
#outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
#inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }
/* positioning the boxes correctly */
#outer { position: relative; }
#wrapper { position: absolute; bottom: 3px; width: 100%; }
#inner { margin: 0 auto; }
</style>
<div id="outer">
<div id="wrapper"><div id="inner"></div></div>
</div>
CSS3 Flexbox allows the bottom positioning very easily. Check the Flexbox support table
HTML
<div class="outer">
<div class="inner">
</div>
</div>
CSS
.outer {
display: flex;
justify-content: center; /* Center content inside */
}
.inner {
align-self: flex-end; /* At the bottom of the parent */
}
Output:
.outer {
background: #F2F2CD;
display: flex;
width: 70%;
height: 200px;
border: 2px solid #C2C2C3;
justify-content: center;
}
.inner {
background: #FF0081;
width: 75px;
height: 50px;
border: 2px solid #810000;
align-self: flex-end;
}
<div class="outer">
<div class="inner">
</div>
</div>
Works well on all browsers including ie6.
<style>
#outer{
width: 70%;
background-color: #F2F2CC;
border: 1px solid #C0C0C0;
height: 500px;
position: relative;
text-align: center;
}
#inner{
background-color: #FF0080;
border: 1px solid black;
width: 30px;
height: 20px;
/* Position at the bottom */
position: relative;
top: 95%;
/* Center */
margin: 0 auto;
text-align: left;
}
</style>
<div id="outer">
<div id="inner">
</div>
</div>