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>
Related
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>
This should be simple for you CSS gurus, but I really can't get this going. There are 4 boxes, example code:
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
</div>
When the window width is less than 800 only the rightmost div is moved, leaving them with 3 on top, and 1 on the next row.
I want the second two to go down the page as a pair. 2 on top, 2 on bottom, even if there is space for 3 next to eachother.
You need to set style for firstPair and secondPair elements
div[id$="Pair"] {
display: inline-block;
float: left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">s</div>
<div style="width: 200px; float: left">d</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">f</div>
<div style="width: 200px; float: left">g</div>
</div>
</div>
And one more solution with shorten html, but some more use css
div[id$="Pair"] {
display: inline-block;
}
[id$="Pair"] > div {
width: 200px;
float: left;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>s</div>
<div>d</div>
</div>
<div id="secondPair">
<div>f</div>
<div>g</div>
</div>
</div>
div[id$="Pair"] {
display: inline-block;
margin: 0;
}
[id$="Pair"] > div {
display: inline-block;
width: 200px;
margin: 2px 0;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>1</div>
<div>2</div>
</div>
<div id="secondPair">
<div>3</div>
<div>4</div>
</div>
</div>
It is about BFC.
You might also float the containers :
#wrapper> div {
float:left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">1</div>
<div style="width: 200px; float: left">2</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">3</div>
<div style="width: 200px; float: left">4</div>
</div>
</div>
Here's my solution. I tend to work in a fully responsive environment, so this will position them and be fully responsive on mobile. I also isolated the css, the inline colors are just for demo.
<style>
div#firstPair {
width: 100%;
max-width:400px;
float: left;
}
div#firstPair div{
width: 50%;
float: left;
}
div#secondPair {
width: 100%;
max-width: 400px;
float: left;
}
div#secondPair div{
width: 50%;
float: left;
}
</style>
<div id="wrapper">
<div id="firstPair">
<div style="background-color: blue;">first_1</div>
<div style="background-color: green;">first_2</div>
</div>
<div id="secondPair">
<div style="background-color: red;">second_1</div>
<div style="background-color: orange;">second_2</div>
</div>
<div style="clear: both;"></div>
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Today I am facing a big problem with centering floated elements that have set custom width. For better explanation I made a snippet for you:
body { text-align: center; }
.square {
width: 20%; height: 100px;
background: cornflowerblue;
float: left;
}
.container {
display: inline-block;
}
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
</div>
</div>
<br>
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
</div>
</div>
The problem is that first three squares get shrinked after centering.
The reason why I am floating the elements is that the second container has to be same as first container and it must contain 5 elements (to cover full width of document). Here is how it looks like without floating (see the gabs between elements):
body { text-align: center; }
.square {
width: 20%; height: 100px;
background: cornflowerblue;
display: inline-block;
}
.container {
display: block;
}
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
</div>
</div>
<br>
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
</div>
</div>
Now the elements have right width, but the second line doesn't cover width of document because of the gabs between elements.
Is there any way to have floated elements with custom width centered? Which styles I should use for container element?
OK, I think I got what you need
.square {
width: 20%; height: 100px;
background: cornflowerblue;
display: inline-block;
font-size: 1rem;
}
.container {
display: block;
font-size:0;
}
jsfiddle
body { text-align: center; }
.square {
width: 20%; height: 100px;
background: cornflowerblue;
float: left;
}
.container {
width:100%;
margin-right:20%;
margin-left:20%;
}
Are you looking for something like this?
Add min-width:7px; this will solve your issue
body { text-align: center; }
.square {
width: 20%;
height: 100px;
background: cornflowerblue;
float: left;
min-width:7px;
}
.container {
display: inline-block;
}
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
</div>
</div>
<br>
<div>
<div class="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
</div>
</div>
Here your 5 div row era is also working.
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
How to create web page using CSS and div to create 4 split screen?
HTML would look like this:
<div class="box">
Area 1
</div>
<div class="box">
Area 2
</div>
<div class="box">
Area 3
</div>
<div class="box">
Area 4
</div>
CSS would look like this:
html, body {
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
height: 50%;
}
Here's a Fiddle to play with: http://jsfiddle.net/UMKWU/
<div class="one" style="float: left; width: 50%; height: 50%;">
</div>
<div class="two" style="float: left; width: 50%; height: 50%;">
</div>
<div class="three" style="float: left; width: 50%; height: 50%;">
</div>
<div class="four" style="float: left; width: 50%; height: 50%;">
</div>
I'm not allowed to comment on questions, otherwise I would just add a comment on first answer by Jordan. His answer is correct, but when you add border, you need to account for the border width, in that case, just add to your css: border-width:1%; and change the width:49%;
height: 49%;.
That should do the trick, here is a link to Fiddle: http://jsfiddle.net/UMKWU/3/
Hi you can do as like this
Css
html, body {
width: 100%;
height: 100%;
}
.box1, .box2, .box3, .box4 {
float: left;
width:49%;
height: 49%;
border-style: solid;
border-width:1%;
}
.box3{
clear:left;
}
HTML
<div class="box1">
Area 1
</div>
<div class="box2">
Area 2
</div>
<div class="box3">
Area 3
</div>
<div class="box4">
Area 4
</div>
Live demo here http://jsfiddle.net/rohitazad/UMKWU/8/