Please help a Java guy with a simple CSS problem. Been trying for hours and can't find a proper solution to the problem: How to stretch the background color of a child element so that it has the same height as the parent element while using float? I bet it has something to do with display:flex, but I can't get it to work :-/
Here's the code: https://jsfiddle.net/bycor29w/
Goal: Right column background colour must be filled to the same height as the middle column no matter how much or little text it contains
Requirement: Must use float
StackOverflow demands: "Links to jsfiddle.net must be accompanied by code", so here you go:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
div {
border: 1px #000 solid;
}
.container {
height: 100%;
width:980px;
float:left;
display: flex;
}
.left {
width: 200px;
float: left;
}
.mid{
padding-top: 1px;
width: 560px;
float: left;
}
.right {
background: #d8d8d8 repeat-y bottom right;
padding: 0 20px;
height:100%;
align-self: center;
flex: 1;
width: 180px;
float: left;
}
</style>
<div class="container">
<div class="left">
asdf<br>
asdf<br>
asdf<br>
</div>
<div class="mid">
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
</div>
<div class="right">
asdf
</div>
</div>
</body>
</html>
Firstly, Flexbox will override floats...if you want to use floats...don't use flexbox.
What you seem to want can be achieved using CSS tables....you can still use floats if absolutely necessary.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
border: 1px #000 solid;
}
.container {
width: 580px;
display: table;
overflow: auto;
vertical-align: top;
}
.left {
width: 100px;
float: left;
display: table-cell;
vertical-align: top;
}
.mid {
padding-top: 1px;
width: 370px;
float: left;
display: table-cell;
vertical-align: top;
}
.right {
background: lightblue;
width: 100px;
display: table-cell;
vertical-align: top;
}
<body>
<div class="container">
<div class="left">
asdf
<br>asdf
<br>asdf
<br>
</div>
<div class="mid">
asdf
<br>asdf
<br>asdf
<br>asdf
<br>asdf
<br>asdf
<br>
</div>
<div class="right">
asdf
</div>
</div>
</body>
Related
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display: flex;
overflow: scroll;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
In this simple example I use both padding on the parent div and margin on the child but there is no padding or margin on the far right of the container... How can I solve this problem? Ty
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.d1 {
background-color: lightblue;
display:inline-flex;
overflow: auto;
padding: 10px;
}
.d2 {
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
<div class="d2">111111111111111111111</div>
</div>
</body>
</html>
I guess you want to keep the lightblue padding when the scroll bar appear. You will have to separate the scroll container and the padding container in order to achieve this.
I suggest you change the HTML into this:
*{
box-sizing: border-box;
}
html,body{
margin: 0;
}
.wrapper{
padding: 10px;
background-color: lightblue;
max-width: 500px;
}
.scroll{
overflow-x: scroll; /* or auto */
display: flex;
}
.content{
background-color: yellow;
margin: 5px;
}
<div class="wrapper">
<div class="scroll">
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
<div class="content">loremipsumloremipsum</div>
</div>
</div>
You can also check out this CodePen
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I Need to wrap the text in the right side respecting the left side and the column on the right in gray.
I have tried everything and searched on the internet, nothing seems to work.
I put min-width to the table-cell in the left side but then it takes space on the gray side.
add display:inline-block in stretch class and set your desire width
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I'm trying to make the first div child below use up 100% of the available space minus 20px and then use the second div child to use 20px and be on the same line as the first child div.
<div style="width: 10%;">
<div style="float: left; margin-right: 20px;">Left side, should use up all space except margin!</div>
<div style="float: left; margin-left: -20px; width: 20px;">Should only use 20px no matter what.</div>
</div>
This should be able to be done with CSS level one (that means no position lame-outs) though I know I'm missing something. Also there will be anchors in both div elements that must use 100% of the available width so there is a trick here to get the float to behave a certain way...
Solution #1
Make use of overflow: hidden (or overflow: auto) to fill the remaining horizontal space.
(NB: For this to work you need to place the element on the right hand side first in your markup)
FIDDLE
<div>
<div class="div2">DIV 2</div>
<div class="div1">DIV 1</div>
</div>
CSS
.div1 {
background:yellow;
overflow: hidden;
}
.div2 {
background:brown;
float:right;
width: 50px;
}
Solution #2
You can do this with box-sizing: border-box
FIDDLE
<div>
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
CSS
.div1 {
background:yellow;
float:left;
padding-right: 50px;
margin-right: -50px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.div2 {
background:brown;
float:left;
width: 50px;
}
Solution #3
Use css tables:
FIDDLE
<div class="container">
<div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>
</div>
.container
{
display:table;
}
.div1 {
background:yellow;
display: table-cell;
width: 100%;
}
.div2 {
background:brown;
width: 50px;
display: table-cell;
word-break: break-word;
min-width: 50px;
}
Solution #4 (CSS3 required)
use calc
FIDDLE
On the first child set width: calc(100% - 50px)
On the second div set width: 50px;
.div1 {
background:yellow;
width: calc(100% - 50px);
float: left;
}
.div2 {
background:brown;
width: 50px;
float: left;
}
Can you change the HTML structure a bit?
<div style="width: 10%;">
<div style="display: block; width: 100%;">
<div style="width: 20px; float: right;"></div>
</div>
</div>
Here's another approach using display:table.
<html>
<style>
body { padding:0; margin:0; display:table; width:100%; }
#content { display:table-row; }
#b1, #b2 { display:table-cell; }
#b1 { background-color:#eee; padding:2em; }
#b2 { width:20px; background-color:#bbb; }
</style>
</head>
<body>
<div id="content">
<div id="b1">
<h1>Main content here</h1>
<p>Side bar on right is 20 px wide.</p>
</div>
<div id="b2">
</div>
</div>
</body>
</html>
i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help!
thanks
konstantin
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Demo posted, on OP's behalf, at: jsbin.
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Try this, works on firefox and chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.