Consider the following HTML:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
with this CSS:
.wrapper {
width: 800px;
height: 300px;
background-color: red;
}
.a {
width: 400px;
height: 120px;
background-color: green;
}
.b {
width: 100px;
height: 150px;
background-color: blue;
}
.c {
width: 100px;
height: 150px;
background-color: lightblue;
}
I now need to place a in the left upper corner and b on top of c on the right side.
my first solution was to do this:
.a{
float: left;
}
.b{
float:right;
}
.c{
float:right;
}
the problem is now that c is left of b, but needs to be below it...
Is there any solution for the problem, even when a has a different height?
SOLUTION USING CSS + HTML
You could place b and c in a containing div (#container), and then float:right #container.
HTML:
<div class="wrapper">
<div class="a"></div>
<div id="container">
<div class="b"></div>
<div class="c"></div>
</div>
</div>
CSS:
.a {
float: left;
}
#container {
float: right;
}
JS Fiddle Example
SOLUTION USING ONLY CSS
If you cannot change the HTML of the page (or would prefer not to), this can be accomplished with pure CSS by using absolute positioning.
CSS:
.wrapper {
position: relative;
}
.a {
position: absolute;
top: 0;
left: 0;
}
.b {
position: absolute;
right:0;
top: 0;
}
.c {
position: absolute;
right:0;
top: 150px; /* or bottom:0 */
}
JS Fiddle Example (using position:absolute)
try this
<div class="wrapper">
<div class="a"></div>
<div class="rightside">
<div class="b"></div>
<div class="c"></div>
<div>
<div class="clear"></div>
</div>
with css:
.a {float: left}
.rightside {float: right}
.clear {clear: both}
You could also try this:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
<div style="clear: both;"></div>
<div class="c"></div>
</div>
Related
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>
Is there a better way to absolutely position a bunch of boxes to the left and right like this? Perhaps using flexbox?
http://jsfiddle.net/frank_o/zpv4jbmx/
HTML:
<div class="box first">
<h1>Lipsum</h1>
</div>
<div class="box second">
<h1>Lipsum</h1>
</div>
...
CSS:
.box {
position: absolute;
background: blue;
color: white;
}
.box.first, .box.third, .box.fifth {
left: 20px;
}
.box.second, .box.fourth, .box.sixth {
right: 20px;
}
.box.first {
top: 20px;
}
.box.second {
top: 120px;
}
...
Since we are going for "better", you could use floating and CSS even/odd rules, like so:
HTML
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<div class="box">
<h1>Lipsum</h1>
</div>
<!-- As many as you'd like... -->
CSS
.box {
background: blue;
color: white;
}
.box:nth-child(odd){
float: left;
clear: both;
}
.box:nth-child(even){
float: right;
clear: both;
}
The result is the same, but the implementation is much more scalable.
http://jsfiddle.net/9mcgvqLj/
I have seen examples of three columns (fixed fluid fixed). However, I need an example of a four column solution.
The two outer columns are fixed.
The two inner columns are fluid.
Fixed | Fluid | Fluid | Fixed
You can use calc.
.first, .last {
width: 300px;
}
.middle {
width: calc(50% - 300px);
}
You may want to apply vendor prefixes too.
HTML
<div id="framecontentLeft">
<div class="innertube">
<h1>Left Frame 1</h1>
</div>
</div>
<div id="framecontentRight">
<div class="innertube">
<h1>Right Frame 4</h1>
</div>
</div>
<div id="maincontent">
<div class="inner1">
<h1>Middle Frame 2</h1>
</div>
<div class="inner2">
<h1>Middle Frame 3</h1>
</div>
</div>
CSS
#framecontentLeft, #framecontentRight{
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: navy;
color: white;
}
#framecontentRight{
left: auto;
right: 0;
width: 150px;
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px;
right: 150px;
bottom: 0;
background: #fff;
overflow: hidden;
}
.inner1{
height: 100%;
background:red;
width:50%;
float:left;
}
.inner2{
background:green;
height: 100%;
width:50%;
float:right;
}
DEMO
I like flexbox better than calc, if you can use it. It’s more… flexible.
<div id="container">
<div class="fixed">
Fixed
</div>
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
<div class="fixed">
Fixed
</div>
</div>
#container {
display: flex;
}
.fixed {
width: 15em;
}
.fluid {
flex: 1;
}
Dabblet. This, of course, makes all columns the same height, and if you can assume that, doing it without flexbox is also no problem given one more container (noting that if the fluid elements won’t necessarily be taller than the fixed ones, then you should give the inner container a max-height):
<div id="container">
<div class="fixed left">
Fixed
</div>
<!-- Fluid container! No, you don’t have to call it this. -->
<div class="bottle">
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
</div>
<div class="fixed right">
Fixed
</div>
</div>
#container {
position: relative;
}
.fixed {
bottom: 0;
position: absolute;
top: 0;
width: 15em;
}
.fixed.left {
left: 0;
}
.fixed.left {
right: 0;
}
.bottle {
margin: 0 15em;
overflow: hidden;
}
.fluid {
float: left;
width: 50%;
}
And, of course, if .bottle overflows, you’ll need some kind of clearing ::after.
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 want to have higher z-index for childrens .bricks so they could always overlap other parents (red square). Parent has to be positioned absolute.
Live example: http://jsfiddle.net/yJ62e/
html
<div class="cont">
<div class="draggable" id="b2">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="draggable" id="b2">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
css
.cont {
position:relative;
background-color: #747373;
height: 300px;
width: 300px;
margin:0 auto;
}
.draggable {
background-color: red;
right:100px;
cursor:pointer;
z-index:1;
position:absolute;
}
#b2 {
height: 100px;
width: 100px;
}
.brick {
background-color: blue;
height: 50px;
width: 50px;
float: left;
z-index:999 !important;
}
The only solution I can think of would be to position the .brick-Children absolute as well. Otherwise z-index won't work.