I have a responsive website with max-width set to 1000px, but I need to fit background picture that will overlap one of the divs and also place full page-width bottom borders to other divs.
The code i have is like this:
.container {
width: 100%;
max-width: 1000px;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 750px;
background: url(background.jpg) no-repeat top center;
margin: auto;
}
.line {
border-bottom: 1px solid black;
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main line" id="second">
</div><div class="container">
<div id="third">
</div>
</div>
</body>
I get the first div with correct width and bottom border going across the full page width, second div has got the background picture showing, but the max-width of 1000px does no longer apply. The bottom border is shown correctly (dividing second and third div) and the third div has got the correct max-width applied again.
What am I doing wrong/not doing to get the max-width for the second div?
YOUR SOLUTION
If the browser support of background-size property is good enough for you, you can use background-size: cover;. Check here or here to see browser support.
Here is the code snippet to show how it works. Be sure to position your background-image to center center if you want it to always be centered.
.container {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.line {
border-bottom: 1px solid black;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 250px;
background: url(http://lorempixel.com/250/250) no-repeat center center;
background-size: cover; /* This does the magic */
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main" id="second">
<div class="container">Put your content in here.</div>
</div>
<div class="line"></div>
<div class="container">
<div id="third">
</div>
</div>
<div class="line"></div>
</body>
LAST (BUT NOT LEAST)
You might want to check this great article about the state of responsive images in web design, that will help you if you are going into responsive web design: Responsive images done right.
Related
I have two divs - one is fixed on the left side of the page as a side nav, and the other I have a background image that I would like to be fluid, and cover the width of the div. I looked and couldn't find anything as specific as what I am looking for. Below is my code.
.geodeticContainer {
width: 100%;
min-width: 800px;
}
.content {
width: 100%;
box-sizing: border-box;
margin-left: 300px;
}
.image {
width: 100%;
background-image: url("images/geodetics.jpg") norepeat center center fixed;
z-index:999;
}
.description {
position: fixed;
width: 300px;
height: 100%;
background-color: #eaeaed;
padding: 20px;
color: #0072bc;
}
<div class="geodeticContainer">
<div class="description">
This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
</div>
<div class="content">
<div class="image"></div>
</div>
</div>
I apologize if that has been done and I just couldn't find it because I don't know how to describe what I am looking for. Appreciate any help I can get.
You can make the image responsive within it's div using flexbox.
I had to adjust the margin-left property a little and I replaced your image class with an <img> tag to simplify.
.geodeticContainer {
width: 100%;
min-width: 800px;
}
.content {
display: flex;
margin-left: 340px;
}
.content div img {
width: 100%;
}
.description {
position: fixed;
width: 300px;
height: 100%;
background-color: #eaeaed;
padding: 20px;
color: #0072bc;
}
<div class="geodeticContainer">
<div class="description">
This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
</div>
<div class="content">
<div><img src="images/geodetics.jpg"/></div>
</div>
</div>
I'm not sure this is what you want to achieve but hopefully this will help
UPDATE:
I updated the code, please check snippet below or go to jsfiddle.net - ps: re-size the screen to see responsiveness. Hope this help
body {
padding: 0;
margin: 0;
background-color: black;
color: black;
}
[class*="col-"] {
height: 200px;
background-color: white;
}
#img {
background: url("http://s10.postimg.org/3nmoewzq1/dramatic_landscape_191458.jpg") top left no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
<p>
This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side. This is the content of the side bar. There will be a descriptive paragraph about the image on the right hand side.
</p>
</div>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-10" id="img">
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I have 4 divs
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
and I need to align them in a "square" order:
I've tried to float-left only 2°div and 4°div, but it does not work.
Unfortunately I can't use
a container with a defined width and all divs left-floated
<div id="container" style="width: 250px">
<div id="first" style="float: left"></div>
<div id="second" style="float: left"></div>
<div id="third" style="float: left"></div>
<div id="fourth" style="float: left"></div>
</div>
or position absolute/relative left, top etc. in my actual project...
So I hope that there is some float trick to solve my problem..
<style>
.divSquare{
width:48%; height:200px; margin:4px; border:1px solid black; float: left
}
</style>
<div class="divSquare">1</div>
<div class="divSquare">2</div>
<div style='clear:both'></div>
<div class="divSquare">3</div>
<div class="divSquare">4</div>
I assume you can define the Height explicitly, and you CAN set a percentage Width.
The divSquare's Width is set to 48% (less than 50%) because the 4px margin and 1px border occupy room either.
JSFiddle to see this in action.
Have you tried using clear? Check this example:
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
div { height: 100px; float: left; width: 100px; }
#a { background: blue; }
#b { background: red; }
#c { background: green; clear: left; }
#d { background: black; }
http://jsfiddle.net/T5X9A/
I'm faking a square with the height: 0; & padding-bottom: 50% - but besides that - the floating part should be clear. Here is a jsFiddle too. I also didn't prefix the box-sizing... - you can google it. Good luck!
HTML
<div class="block one">1</div>
<div class="block two">2</div>
<div class="block three">3</div>
<div class="block four">4</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.block {
width: 50%;
float: left;
height: 0;
padding-bottom: 50%;
}
.one {
background: yellow;
}
.two {
background: lightblue;
}
.three {
background: orange;
}
.four {
background: red;
}
Does a simple clear float work? This HTML appears to do what you want:
<html>
<style>
div {
float: left;
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 8px;
}
#third {
clear: left;
}
</style>
<body>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
</body>
</html>
It really is based on the width of the four divs. The container has a width of 250px so if the first two divs are 125px in width then they'll fill up the first row pushing all the remain divs down. If the divs were all width: 50% that'll have the same effect. If the div's widths were anything less than 33.3333% then the at least three divs will pile up in the first row. Float left allows the boxes to go side by side until it hits the parent's width limit. What you can do is control the width by:
#container > div {
width: 50%;
}
Or you can clear the floats every third div.
#container > div:nth-of-type(3n + 3) {
clear: both;
}
http://jsfiddle.net/3ssKK/1/
I'm trying to create a responsive grid with a defined pattern, like this:
right now i have working part of it here:
grid demo
But I can't put all the columns in the right place, the big box on the right side never has 2 boxes on its left.
This is the code for the container:
<div class="container">
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6 BIG</p>
</div>
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6 BIG</p>
</div>
</div>
and this is the css:
.container {
max-width: 1000px;
margin: 0 auto;
background-color: #5B83AD;
}
.box {
background-color: #5B83AD;
width: 50%;
float: left;
height: 200px;
}
.box:nth-child(6n+1){
background-color: #444444;
height: 400px;
}
.box:nth-child(6n){
background-color: #992277;
height: 400px;
}
#media screen and (max-width: 620px) {
.box {
clear: both;
width: 100%;
}
}
#media screen and (min-width: 621px) {
.box {
clear: none;
width: 50%;
}
}
I want the boxes to keep always the same layout:
1 big - 2 half height
2 half height - 1 big
...
And i need it to work on IE8 too
Is there a way to achieve this layout(it has to be responsive and if i remove a box the layout has to re-adapt)?
They are out of order, but maybe you'll accept it I'm not sure. Box 4 is the big one not 6 which makes it a little strange but the design still follows the pattern.
Sorry if this isn't what you wanted.
http://jsfiddle.net/UN2DH/3/
The only major change is this from :nth-child(6n) to nth-child(6n+4) and the added float right to that rule.
.box:nth-child(6n+4){
background-color: #992277;
height: 400px;
float: right;
}
HTML
<div class="container">
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4 BIG</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6</p>
</div>
<div class="box">
<p>box1 BIG</p>
</div>
<div class="box">
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
</div>
<div class="box">
<p>box4 BIG</p>
</div>
<div class="box">
<p>box5</p>
</div>
<div class="box">
<p>box6</p>
</div>
</div>
CSS
.container {
max-width: 1000px;
margin: 0 auto;
background-color: #5B83AD;
}
.box {
background-color: #5B83AD;
width: 50%;
float: left;
height: 200px;
}
.box:nth-child(6n+1){
background-color: #444444;
height: 400px;
}
.box:nth-child(6n+4){
background-color: #992277;
height: 400px;
float: right;
}
#media screen and (max-width: 620px) {
.box {
clear: both;
width: 100%;
}
}
#media screen and (min-width: 621px) {
.box {
clear: none;
width: 50%;
}
}
EDIT:
I forget you don't really need the float:left on the .box:nth-child(6n+5), .box:nth-child(6n+6) rule so I removed it above. (so just a heads up if you used that code. It's not necessary because the .box rule already had a float: left) I also updated the jsfiddle above. Heres the old JSfiddle previously its CSS, and the CSS above, had this rule.
.box:nth-child(6n+5), .box:nth-child(6n+6){
float: left;
}
EDIT:
Okay so I just had to have a little fun. :)
I added the following to a new JSFiddle. To make it look like your picture. I wasn't sure how many lines of text you were going to have, but the vertical centering will only work if it's one line of text so keep that in mind. If you want it centered otherwise you'll have to use some other method, like this, and if you know the height and the width of the div or image you want to center here is a great method that will work. Just make sure your parent div is position: relative., if you're using the code from that 'great method', or else this will center this in your whole browser window or the closest element with positioning of fixed, absolute, or relative to it. (more about positioning here.)
I added most of the styles at the bottom of the style sheet just to seperate the old from the new so you could tell what's different, but first I'll show you what styles I added to the existing code. I changed two background colors for .box:nth-child(6n+1) I added background-color: #676767; and for .box:nth-child(6n+4) I added background-color: #CDCDCD;.
Here are the changes I made at the bottom of the stylesheet. (if you decide to go with this you can merge the style rules together.)
.box {
text-align: center;
box-sizing: border-box;
line-height: 200px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #fff;
}
.box:nth-child(3n+1) {
line-height: 400px;
}
.box p {
margin: 0;
}
.box:nth-child(3n+2) {
background-color: #7ACDC8;
}
.box:nth-child(3n+3) {
background-color: #3CB878;
}
Yeah, I know now my answer is just ridiculously long...
Anyways, hope you like it. :) If not that's okay too.
Maybe this is what you want. Demo.
.box:nth-child(1),.box:nth-child(7n){
background-color: red;
height:200px;
}
.box:nth-child(2n){
background-color: green;
height:100px;
}
.box:nth-child(3n){
background-color: yellow;
height:100px;
}
.box:nth-child(5),.box:nth-child(11){
background-color:grey;
height:200px;
float:right;
}
You just need to play around with css3 :nth-child() selector.
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}
I new to webdesign and I wonder how I could do something like this:
..........................
LEFT --- CENTER ---- RIGHT
..........................
Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.
This is how it looks now.
My current HTML:
<div id="container_m">
<div id="left">
<p>My name is Barnabas</p>
</div>
<div id="right">
<p>Till salu</p>
</div>
<div id="center">
<p>Senaste nytt</p>
</div>
</div>
My currrent CSS:
#container_m
{
position:absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#left
{
position: relative;
height: 100%;
width: 33%;
float: left;
background-color: blue;
}
#right
{
position: relative;
height: 100%;
width: 33%;
float: right;
background-color: green;
}
#center
{
position: relative;
height: 100%;
width: 33%;
margin:0 auto;
background-color: yellow;
}
Floating divs can sometimes ruin the auto-resize of the parent div. What I do to ensure proper auto-resize of the parent div is to add this to parent div, just behind the last floating child:
<div style="clear: both;"></div>
This may be a dirty fix or whatever but it ensures the parent div always resizes along with its children.
whats wrong with that? I'm resizing my browser and they seem to be getting bigger and smaller. if you are talking about the fact they're not all inline then you need to do this:
<div id="parent">
<div id="left">
Left Content
</div>
<div id="center">
Center Content
</div>
<div id="right">
Right Content
</div>
</div>
And then float them all left. :)
You can simplify that hugely: http://www.jsfiddle.net/fsnuh/
HTML:
ids not needed on each child, as on your website, they are styled identically. classes attached below purely for the colored backgrounds
<div id="container_m">
<div class="red">
<p>My name is Barnabas</p>
</div>
<div class="yellow">
<p>Till salu</p>
</div>
<div class="green">
<p>Senaste nytt</p>
</div>
</div>
CSS
Styles for left, right and center combined into one. Overuse of position: relative removed.
#container_m
{
position: absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#container_m div
{
height: 100%;
width: 33.33%;
float: left;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
.yellow
{
background-color: yellow;
}