How Google made the color bar located at their footer of this page.
Is it possible to make this in CSS and have it expand 100% of width ?
This is quite easy to do in CSS. Make a div(in this case .googlebar) that has 100% width, and however high you want(I chose 5px).
Then, place 4 spans inside, display them inline-block, set the width to 25%(since there is 4 of them), and the height to 100%.
All that is left to do is change the colors, and you are done :
.googlebar{
width:100%;
height:5px;
}
.googlebar span{
display:inline-block;
width:25%;
height:100%;
}
.googlebar span.blue{
background:#0089FA;
}
.googlebar span.red{
background:#FF002B;
}
.googlebar span.orange{
background:#FFA900;
}
.googlebar span.green{
background:#00A753;
}
<div class="googlebar">
<span class="blue"></span><span class="red"></span><span class="orange"></span><span class="green"></span>
</div>
This will do it for you: https://jsfiddle.net/xtat0oa6/1/
HTML
<div class="footer">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
.footer {
margin-top: calc(100vh - 5px);
}
.div1 {
width: 25%;
height: 5px;
background-color: blue;
float: left;
}
.div2 {
width: 25%;
height: 5px;
background-color: red;
float: left;
}
.div3 {
width: 25%;
height: 5px;
background-color: orange;
float: left;
}
.div4 {
width: 25%;
height: 5px;
background-color: green;
float: left;
}
Related
The structure I need to recreate
I need to put the bottom right rectangle below the blue square just like on the left side and I have trouble with it. I have to use float and clear. Currently it is too low. Only the shape matters.
.blok1_1 {
background-color: cornflowerblue;
width: 450px;
height: 330px;
float: left;
}
.blok1_2 {
background-color: cornflowerblue;
width: 362px;
height: 330px;
float: right;
clear: right;
}
.blok1_3 {
background-color: yellow;
width: 1075px;
height: 855px;
float: right;
}
.blok1_4 {
background-color: mediumspringgreen;
width: 450px;
height: 520px;
float: left;
}
.blok1_5 {
background-color: mediumspringgreen;
width: 360px;
height: 525px;
float: right;
clear: both;
}
<nav class="blok1_1">
</nav>
<nav class="blok1_2">
</nav>
<section class="blok1_3">
</section>
<nav class="blok1_4">
</nav>
<nav class="blok1_5">
</nav>
easiest way is to use flex
#container{
display:flex;
margin:0 auto;
justify-content:center;
}
.end{
display:flex;
flex-direction:column;
}
.top{
width:150px;
height:200px;
background-color:lightblue;
}
.bot{
width:150px;
height:400px;
background-color:green;
}
#middle{
width:150px;
height:600px;
background-color:yellow;
}
<div id='container'>
<div class='end'>
<div class='top'></div>
<div class='bot'></div>
</div>
<div id='middle'>
</div>
<div class='end'>
<div class='top'></div>
<div class='bot'></div>
</div>
</div>
So I assume this is an exercise with pretty specific requirements. In that case I don't think DCR's answer will suffice, altough I have to say that it would probably be the real-world solution these days. Especially the part where floats are replaced with flex and the html structure is changed in some grid like construction of a left, middle and right section. I fully believe that's the way to go.
BUT since it's an exercise and using float and clear are your only options. Have a look at the code below!
Use a container for the 4 square elements. (the yellow part in the middle is just the background from the container)
The left elements float left and the right elements float right.
Since you want the bottom squares to be below the top squares instead of next to them you also add the clear left or right rule to these elements.
.container {
background-color: yellow;
width: 350px;
height: 300px;
}
.left-top {
background-color: cornflowerblue;
width: 100px;
height: 100px;
float: left;
}
.right-top{
background-color: cornflowerblue;
width: 100px;
height: 100px;
float: right;
}
.left-bottom {
background-color: mediumspringgreen;
width: 100px;
height: 200px;
float: left;
clear: left;
}
.right-bottom {
background-color: mediumspringgreen;
width: 100px;
height: 200px;
float: right;
clear: right;
}
<div class="container">
<div class="left-top"></div>
<div class="right-top"></div>
<div class="left-bottom"></div>
<div class="right-bottom"></div>
</div>
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
I am trying to make my div boxes work out.
I want the orange boxes to have the same size by expanding the smaller ones to the same height as the biggest one.
I also want to make the one on the second row fit properly, to the left perfectly aligned.
HTML
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description <br /> Extra line</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
CSS:
.picture {
width: 20%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
}
JSFiddle with the problem: http://jsfiddle.net/PW3GV/1/
Edit
The orange boxes can have a varying height. Sometimes it may contain 1 line, 2 lines or 3 lines - so a fixed height is not going to work out
check this fiddle: http://jsfiddle.net/VYZEx/
i've just added a single line of code to the css, it will work as long as you don't mind that the orange boxes have a fixed size, in that case change this and you will be done:
.description {
background-color: orange;
height: 40px;
}
Good luck!
There you are JSFiddle hope it's what you were aiming for;
.picture {
width: 18.5%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
height: 20px;
overflow: auto;
cursor: pointer;
text-align: center;
}
.description::-webkit-scrollbar{
display: none;
}
I kept the description size as it is and instead made it scrollable.
Change the .picture width to 18.484% as below:
.picture {
width: 18.484%;
margin: 5px;
float: left;
}
.description {
background-color: orange;
}
And add the jQuery script as below:
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".description"));
});
See the updated jfiddle.
Give the .picture frame a relative positioning, make the description position relative and place it at the bottom of the .picture frame then give it a 100% width to take up the entire container.
.picture {
width: 20%;
margin: 5px;
float: left;
position: relative;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
position:absolute;
bottom:0;
width:100%;
}
http://jsfiddle.net/PW3GV/8/
Here is how I would attempt this using relative positioning for .picture and absolute positioning for .description.
See my jsfiddle:
http://jsfiddle.net/PW3GV/9/
.picture {
width: 20%;
margin: 5px;
float: left;
position:relative;
}
.description {
background-color: orange;
position:absolute;
bottom:0;
width:100%;
}
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}
So I have this html
<div class="app-wrapper">
<div class="search-form"/>
<div class="results">
<div class="tabs"/>
</div>
</div>
search-form has absolute positioning and is floated left. I want tabs to appear next to it, but at the top of the page. Note it doesn't have to be that tabs is always on the screen(fixed is not required).
Right now I have
.search-form {
position: absolute;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
position: fixed;
border-bottom: 1px solid #section-border;
width: 70%;
height: 3.0em;
float: right;
left: 31%;
background: #tabs-background;
}
But this doesn't work because on larger screens the distance between tabs and the search-form expands.
How do I get it so tabs is next to search-form, fills up the rest of the page, and that the distance between tabs and search-form does not depend on screen size?
So I just realized that tabs is inside of another div, with CSS
.results {
width: 70%;
}
Maybe this is what you are looking for: http://jsbin.com/ofagoq/11/edit
The CSS:
.search-form {
background-color: red;
width: 30%;
min-width: 200px;
max-width: 350px;
height: 100%;
min-height: 600px;
float: left;
}
.tabs {
background-color: green;
width: 70%;
height: 3.0em;
}
This is an approach using % for your widths only. You could set max and min widths as well in %. http://jsbin.com/upucob/1/
.app-wrapper {
width:90%;
float:left;
margin:1em 3%;
padding: 1em 2%;
background: #CCC;
}
.search-form {
width: 30%;
min-height: 600px;
float: left;
background:#999;
}
.tabs {
width: 70%;
height: 3.0em;
float: left;
border-bottom: 1px solid #000;
background:#888;
}
<div class="app-wrapper">
<p>This is the outter container</p>
<div class="search-form">
<h3>Form goes here</h3>
</div>
<div class="tabs">
<h3>Tabs</h3>
</div>
<div class="results">
<h3>The Results</h3>
</div>
</div>