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>
Related
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>
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>
I write this code: jsfiddle.net/4ror198u/1/
That zombi class is ok and when my mouse goes over it it show me that pink box, but why when my mouse is over blue i canno't see the green class ?
Can you help me where im wrong and what i need to do to fix this problem, also to suggest some examples why this thing hapening and how to prevent it in feature.
Thanx in advance! :)
You have misplaced the class green with class shell so I rearranged that and I placed some attributes to the .green class in order the difference to be obvious.The blue box works exactly as the effect that you have for the zombieone.
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: yellow;
margin: 0;
padding: 0;
}
.zombitwo {
height: 200px;
width: 200px;
background: pink;
border-radius: 10px;
text-align: center;
line-height: 200px;
display: none;
}
.zombione:hover + .zombitwo {
display: block;
}
.black{
//border: 5px solid red;
background-color: black;
width: 300px;
height: 300px;
}
.blue{
width: 300px;
height: 300px;
background-color: blue;
//border: 5px solid blue;
}
.green{
height: 300px;
width: 300px;
background-color: green;
color:red;
//border: 5px solid green;
display: none;
text-align:center;
}
.blue:hover + .green{
display: block;
}
</style>
<div class="zombione">test</div>
<div class="zombitwo">work</div>
<div class="wrapper">
<div class="shell">
<div class="black">
<div class="blue">
<div class="shell">
</div>
</div>
<div class="green">
<div class="shell">
<div class="sblack"></div>
<div class="sred"></div>
<div class="sgreen">It works fine!!</div>
</div>
</div>
</div>
</div>
</div>
I have the following html markup:
.container {
border: 1px solid green;
}
.right {
border: 1px solid #000;
float: right;
width: 40px;
}
.left {
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
<br/>
multiple rows
</div>
</div>
</div>
As you can see right block looks ugly. How could I make right element fluid height 100%?
Add the rule height:100% the right div, and remove float:right. I changed it to position:absolute, so that you didn't need the container's height.
.container {
border: 1px solid green;
position: relative;
width: 100%;
}
.right {
border: 1px solid #000;
width: 40px;
height: 100%;
position: absolute;
right: 0;
}
.left {
display: block;
border: 1px solid red;
overflow: hidden;
margin-right:40px;
}
<br><br><div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
</div>
</div>
</div>
If your application will run in a modern browser, then using flexbox is a good way to go: http://jsfiddle.net/2hn9zgog/.
HTML:
<div class="container">
<div class="right">Right</div>
<div class="left">
Left fluid
<br/>multiple rows
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
outline: 1px dotted gray;
}
.right {
order: 2;
flex: 0 0 auto;
border: 1px solid green;
}
.left {
flex: 1 0 auto;
border: 1px solid red;
}
add clear: both; after floated element.
<div class="right"></div>
<div style="clear: both"></div>
Add
html, body{
height: 100%;
min-height: 100%;
}
.your-container{
height: 100%;
}
<html>
<head>
<style>
div#one{
display: inline-block;
border: 1px solid green;
width: 200px;
height: 200px;
}
p {
border: 1px solid black;
}
div {
display: inline-block;
border: 1px solid green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="one">
<p>Something here</p>
</div>
<div></div>
</body>
</html>
This is my code, I expected the divs to be arranged side-by-side but they are not. Why?
Add
vertical-align:top
to div.
JSFiddle demo
You shouldn't use inline-block in this case. This may cause errors on old browsers (IE;).
Use "float" instead. http://jsfiddle.net/Tymek/HM835/
div {
display: block; /* this */
float: left; /* and this */
border: 1px solid #0F0;
width: 200px;
height: 200px;
}
#one {
border-color: #F00;
width: 200px;
height: 200px;
}
p {
border: 1px solid #000;
}
<div id="one">
<p>Something here</p>
</div>
<div>
Lorem ipsum
</div>