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>
Related
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.
On the page I'm laying out, there's a bunch of divs stuffed into each other. The HTML code looks something like this:
<div id="overlay">
<div id="main_section">
<div class="left">yadda yadda left sidebar</div>
<div class="middle">
<div id="header">yadda yadda header</div>
<div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
</div>
<div class="right">yadda yadda right sidebar</div>
<div class="clear"></div>
</div>
</div>
The main container is overlay, and it used fixed position, like so:
#overlay {
position: fixed;
width: 100%; height: 90%;
top: 0px; left: 0px;
background-color: rgba(255,255,255,0.5);
}
(I'm layering multiple backgrounds with various levels of opacity, which is why there is main_section, overlay, etc.)
Now, all the children use relative positioning, which works out fairly well. The problem occurs in #main_content. #main_section and .middle both have height: 100%, and as expected they go all the way down to the bottom of #overlay. Now, here's #main_content:
#main_content {
position: relative;
height: 100%;
width: 70%;
overflow-y: auto;
text-align: right;
}
This doesn't work as I want it to, since due to the image size the thing extends right down to the bottom of the page instead of to the bottom of #overlay. I've tried overflow-y: scroll and height: inherit, I've tried max-height: 100%, and I am ripping my hair out. Stackoverflow is my last hope before I get a heart attack!
I changed and added some properties since the full source code wasn't provided (colors only present to recognize relevant blocks). It appears to me that the mistake must be somewhere else in your CSS, because the underneath code works fine for me.
<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
position: fixed;
width: 100%;
height: 90%;
top: 0px;
left: 0px;
background-color: blue;
border: 2px solid green;
}
#main_section {
width: 100%;
height: 100%;
background: yellow;
}
.middle {
height: 100%;
width: 100%;
background: lavender;
position: relative;
}
#main_content {
position: relative;
height: 100%;
width: 70%;
text-align: right;
overflow-y: auto;
background-color: red;
}
img {
width: 700px;
height: 2000px;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="overlay">
<div id="main_section">
<div class="left"></div>
<div class="middle">
<div id="header"></div>
<div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
</div>
<div class="right"></div>
<div class="clear"></div>
</div>
The only time when I get the same problem as you, is when I set these #main_content {position:fixed;} or .middle {position:fixed;}. Are you sure #main_content or .middledidn't inherit a fixed position? Or maybe an unnoticed class added the property?
I found myself having the same problem.
There are answers to quite similar questions on SO. But all I found was only working either on the whole page/body or with a fixed height on the container. Some use float and positioning (absolute or relative does not really matter here). The overall tenor however is to use display elements, which I find to be both the most elegant and practical.
Below is my solution. You can place it in any container. It will adopt exactly to the container height and width, no overflow. Well as you can see it just combines an display: inline-block parent with a display: table child.
Note that if you add a display: table-caption the overflow will occur again (please leave a comment if you know the reason for this).
<div id="#place_me_anywhere"
style="display: inline-block;width: 100%;height: 100%;">
<div style="display: table;height: 100%;width: 100%;">
<!--<div style="display: table-caption;">
Height overflow will occur
</div>-->
<div style="display: table-row;">
<h1>Heading</h1>
</div>
<div style="display: table-row;background-color: pink;height: 100%;">
<!-- this row consumes all remaining height without overflow -->
<div style="display: table-cell;width: 10em;min-width: 10em;background-color: red;">
Just an example of some fixed width column/cell
</div>
<div style="display: table-cell;background-color: blue;">
takes the remaining width
</div>
</div>
</div>
</div>
I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
background: #FF0;
}
.left {
float: left;
width: 50%;
background: #F0F;
}
.left .first {
height: 20%;
}
.left .second {
height: 50%;
}
.left .third {
height: 30%;
}
.right {
float: right;
width: 50%;
}
.right img {
display: block;
max-width: 100%;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</body>
</html>
The short answer is that you can kind of do this, but I don't think it will behave the way you expect.
You would have to declare explicit heights for the two <div>'s -
.left, .right {
height: 100px /*or whatever height you want*/;
}
If this is a static page, and the image never changes, you can manually enter the pixel amount.
If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.
There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.
There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).
Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.
There are a few things you need to do:
You need to float the containers.
You need to add an extra container and nest the divs in the following order:
<div class="container2">
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</div>
Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.
For your CSS:
.container {
width: 100%;
float: left;
position: relative;
right: 50%;
}
.container2 {
width: 100%;
float: left;
overflow:hidden;
position:relative;
}
.left {
float: left;
width: 50%;
left: 50%;
position: relative;
background: #F0F;
}
.right {
float: left;
width: 50%;
left: 50%;
position: relative;
}
Please see this page if you're having difficulties.
I have been trying this for sometime now.
What I am trying is a 3 column layout using div as below:
Header
body - 3 columns (left, center, right)
footer
sample i used:
HTML:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}
The issue that I am facing is that, whenever I resize the window, the div starts to shrink - which I dont want to happen.
I want layout something like http://www.w3schools.com/
where when I resize the window, the div doesnot shrink but rather doesnot show the other columns.
Any help is appreciated.
Set the min-width property to stop an element shrinking.
I would suggest you to wrap all divs around one which is with some fixed width or min-width set (as someone else suggest).
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;
}