I've got three left-floating div (1, 2 & 3) and one floating right (4), which is also the last div in my HTML code. The three on the left take up 60% of the width and the last div should fill in on the right. However div 4 only floats past the div 3 and then stops.
<body>
<div style="width: 60%; float: left; background-color: red;">
div 1
</div>
<div style="width: 60%; float: left; background-color: red;">
div 2
</div>
<div style="width: 60%; float: left; background-color: red;">
div 3
</div>
<div style="width: 40%; float: right; background-color: yellow;">
div 4
</div>
</body>
Any suggestions how to make the div go to the top of the page?
This is what you want? DEMO
I edited a bit your HTML code:
<section class="container">
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
<div class="block four"></div>
</section>
Just add these CSS rules:
*, *:before, *:after {
box-sizing: border-box;
}
body, div, section {
margin: 0;
padding: 0;
}
html, body {
background: #CCC;
height: 100%;
}
.block {
height: 100px;
display: inline-block;
border: 1px solid black;
}
.block:not(.four) {
float: left;
width: calc(60% / 3);
}
.four {
width: calc(100% - 60%);
}
.container > .four {
float: right;
}
I used the calc() function for set the anchors to the elements. You can see the browser support here
EDIT Sorry, I didn't understand your question. This is what you want! DEMO =)
Cheers,
Leo!
I think what you are trying to achieve here is put some content in your page (the left floated divs) and a sidebar (the right div).
Well, there are many ways to do it, here is a method without using floats (right or left).
HTML:
<body>
<section style="width: 60%;"> <!-- Your main content goes in here -->
<div style="background-color: red;">div 1</div>
<div style="background-color: red;">div 2</div>
<div style="background-color: red;">div 3</div>
</section>
<aside style="width: 40%;" class="right"> <!-- content for right sidebar -->
<div style="background-color: yellow;">div 4</div>
</aside>
</body>
CSS:
aside,section {
display : inline-block;
padding : 0;
margin : 0;
}
aside.right {
vertical-align: top; //to bring sidebar to top
}
Here is a demo FIDDLE
Related
I am trying to create a section on my page that will contain inline-block divs (that would of various lengths). This outer div will be scales with the width of its parent (the parent has col-md-8). I'm trying to see if it's possible to float all the inner individual divs left with a right margin and have them disappear off to the right edge of the parent div. Clearly I'm missing something as these are not lining up the way I want them to.
.outer {
position: relative;
width: 330px;
height: 140px;
overflow-y: hidden;
background-color: red;
}
.box {
display: block;
height: 130px;
float: left;
margin-right: 20px;
background-color: grey;
border: 1px solid #333;
}
.box-1-col {
width: 130px;
}
.box-2-col {
width: 260px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="outer clearfix">
<div id="box-1" class="box box-2-col">
This is box 1
</div>
<div id="box-2" class="box box-1-col">
This is box 2
</div>
<div id="box-3" class="box box-1-col">
This is box 3
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/xc66s1L8/4/
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
Guy, Sorry I suck that this
How can i make this all my boxes avoid the spacing made by box 1 so that the box 4 auto adjust on the top
My Fiddle link - http://jsfiddle.net/QKbEk/3/
.grp {
width: 140px;
margin: 0px auto;
}
.box {
background: red;
margin: 3px;
float: left;
width: 50px;
height: 50px
}
You could change your rule for .box4 to:
.box4 {
background: red;
float: left;
margin: 3px;
width: 50px;
height: 50px;
position:relative;
top:-25px;
}
jsFiddle example
This happens because of the rules applied to floated elements. Specifically, "The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.". However by using positioning you can place the box wherever you need.
<div class="grp">
<div style="float:left;width:40%">
<div class="box" style="height: 80px">box 1</div>
<div class="box">box 4</div>
</div>
<div style="float:left;width:40%">
<div class="box">box 2</div>
<div class="box">box 3</div>
<div class="box">box 5</div>
</div>
</div>
Joshua Johnson post for masonry design: http://designshack.net/articles/css/masonry/
The image shows what I'm trying to accomplish. All 3 divs are contained in a wrapper that's 800px. But the second div's background extends the full width of the body.
I have a solution nearly identitical to the one by patkay.
My HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="content">Content 1...</div>
</div>
<div class="inner-wrapper noted">
<div class="content">Content 2...</div>
</div>
<div class="inner-wrapper">
<div class="content">Content 3...</div>
</div>
</div>
And my CSS:
.outer-wrapper {
width: 100%;
outline: 1px dotted blue;
}
.inner-wrapper {
width: inherit;
}
.inner-wrapper.noted {
background-color: gray;
}
.content {
width: 600px;
margin: 10px auto;
outline: 1px dotted red;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/Nbu7G/
Essentially, I use the .outer-wrapper to set control the overall width, and then inherit the width to the .inner-wrapper which is used to set the background color through an extra class call .noted.
The inner-most container .content has the fixed width (for example, 600px).
The extra markup could be clean-up semantically using HTML5 tags, but this pattern gives you a lot of hooks to use background images and so on.
One way you can do this is to have three separate div's that are all aligned centrally on the inside, have full width backgrounds and are stacked on top of each other.
<div class="top">
<div class="wrap">
<p>Some content</p>
</div>
</div>
<div class="mid">
<div class="wrap">
<p>Some content</p>
</div>
</div>
<div class="bottom">
<div class="wrap">
<p>Some content</p>
</div>
</div>
The CSS is:
body {
text-align: center;
}
.top, .bottom {
background: #aaa;
width: 100%;
}
.mid {
background: #616161;
width: 100%;
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 5px;
}
I am trying to create a header with 3 divs: one is aligned left, one is aligned right and the other is in the center.
the page is for example 1200px
the black,red and yellow rectangles are 960px and centered in the page.
elements in the black rectangle are added to the left,
elements in the yellwo rectangle are added to the right,
and the elements in the red tectangle are centered.
This is a good general case study for header of a site
This will solve your issue
<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
<div style='float:left;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
<div style="margin:10px auto;text-align:center">Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
I wrote an article on this a while back here is my code...
<div id="mainContent">
<div id="col1">
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="col3">
Column 3
</div>
<div id="clearance" style="clear:both;"></div>
</div>
And here is the CSS for it....
#mainContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#col1 {
margin: 10px;
float: left;
width: 300px;
}
#col2 {
margin: 10px;
float: left;
width: 300px;
}
#col3 {
margin: 10px;
float: left;
width: 300px;
}
Hope this helps... Phillip Dews
Try this..
<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>
<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>