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).
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 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;
}
When I place a fixed size display-block <span> element inside a <div> it causes a weird margin or padding (I don't know) at the bottom of the <div>. When there is text inside the <span> element, everything is fine. What's the reason for this? How can I fix it? I tested on Firfox and Chrome.
Weird space http://picster.at/img/0/9/6/0968c75ddf29ad07cb71eee2cff472a9.png
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.outer {
background: grey;
padding: 4px;
}
.inner {
display: inline-block;
background: cyan;
height: 40px;
width: 40px;
}
-->
</style>
</head>
<body>
<div class="outer">
<span class="inner">Foo</span>
</div>
<br>
<div class="outer">
<span class="inner"></span>
</div>
</body>
</html>
Update:
Floating would be an alternative to display-block elements. Perfectly valid, however I would like to understand what's wrong with display-block in this example. Also, it doesn't look like a white-space problem to me, as this would only affect margin to the left/right (correct me if I'm wrong).
It is because you are using inline-block;, this is the best example of how inline-block is different from floats
Demo
.outer {
background: grey;
padding: 4px;
overflow: hidden;
}
.inner {
float: left;
background: cyan;
height: 40px;
width: 40px;
}
inline-block leaves whitespace of 4px margin.
More Info
This hack works great for me.
Demo
.inner:after{
content: '\00a0';
}
inline-block is messing it up
If your intention of setting it as inline-block was to set a row of .inner's, set change the inner to block, and float left.
Then use a div with clear: both to fix the issue that normally the floating causes.
Here's your code modified:
<head>
<style type="text/css">
<!--
.outer {
background: grey;
padding: 4px;
}
.inner {
display: block;
background: cyan;
height: 40px;
width: 40px;
float: left;
margin-right: 4px;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<div class="outer">
<span class="inner">Foo</span>
<div class="clear"></div>
</div>
<br>
<div class="outer">
<span class="inner"></span>
<span class="inner"></span>
<div class="clear"></div>
</div>
</body>
</html>
It can be solved by setting the "line-height" of the outer element to 0. This solves pretty much every case.
Don't forget to make sure the inner element doesn't inherit that though, to do this you can just set it to "line-height:initial".
.outer {
background: grey;
padding: 4px;
line-height:0;
}
.inner {
display: inline-block;
background: cyan;
height: 40px;
width: 40px;
line-height:initial;
}
So I have a webpage with a column. The column has a fixed header up top, and a large scrolling body section, and the HTML/CSS below works fine for this.
The problem: I want to add padding to the bottom of the body, so if you scroll all the way down, you get some whitespace instead of having everything jammed right up to the bottom edge. Adding padding-bottom: 50px to .body works perfectly in Chrome; however, in Firefox, it appears that using the bottom property means that padding-bottom is ignored. If you drop bottom, the padding appears, but the scrollbar disappears.
test.html
<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
<div class="header">
Fixed header
</div>
<div class="body">
<h1>Body</h1>
Where's the bottom padding?
</div>
</div>
test.css
.column {
position: absolute;
height: 100px;
width: 100%;
background-color: green;
}
.header {
position: absolute;
height: 30px;
background-color: red;
}
.body {
position: absolute;
top: 30px;
bottom: 0;
overflow-y: auto;
background-color: blue;
padding-bottom: 50px; /* Broken in Firefox */
}
JSFiddle for the above: http://jsfiddle.net/jpatokal/PBwVa/
Is there a way around this? The one workaround I came up with was using a string of :last-child selectors to add padding to the very last element within .body instead, but, eww.
Adding a inner div inside the div.body with a margin-bottom seems to work in your jsfiddle.
<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
<div class="header">
Fixed header
</div>
<div class="body">
<div class="inner">
<h1>Body</h1>
Where's the bottom padding?
</div>
</div>
</div>
and the (extra) css:
.body .inner {
margin-bottom: 30px;
}
Another workaround would be to wrap your content in another div, and add your padding (or margin) to that div instead of the scrolling .body div:
<div class="body">
<div class="body-content">
<h1>Body</h1>
Where's the bottom padding?
</div>
</div>
and the css...
.body {
position: absolute;
top: 30px;
bottom: 0;
overflow-y: auto;
background-color: blue;
}
.body-content {
padding-bottom: 50px; /* should work */
}
One more workaround when you don't want to add extra DIVs.
.body:after {
content: "";
display: block;
height: 50px;
width: 100%;
}
Working in FF, Chrome, IE8-10.
I have two divs, the right one is 80px wide the other should fill up the remaining space. So far I tried:
<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#left {
position: relative;
margin-right: 80px;
background-color: red;
}
#right {
float: right;
position: relative;
text-align: left;
width: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</body>
</html>
However, the right box is always put below the left box and not right to it. I guess it is because of the margin. I also tried a margin-left: -80px on the right one but this doesnt seem to change anything. So how do I have to change the CSS so that the right div is in the same line as the left div?
Have the right div before the left.
<div id="right">
Right
</div>
<div id="left">
Left
</div>
Working Example
Alternatively, if you're looking for the LEFT div to remain at a static width and the RIGHT div to expand and contract with the size of the page, you'd use the following code:
.left {
float: left;
position: relative;
width: 80px;
background-color: red;
}
.right {
position: relative;
text-align: left;
margin-left: 80px;
background-color: yellow;
}
And the HTML would be...
<div class="left">Left</div>
<div class="right">Right</div>
That's because div is a block element, meaning it will always break the flow. What you can do is change both the div's display to inline and float to left.
You can change the position:relative; of #right to position:absolute;top:0;right:0;.
This will position the element in the right-top corner of its parent.
Example: http://jsfiddle.net/WaQGW/
Nowadays it can be done with flex.
Set container's (body in this case) display property to flex, then set width of left div to 100%.
body {
margin: 0;
padding: 0;
display: flex;
}
#left {
background-color: red;
width: 100%;
}
#right {
width: 80px;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
</head>
<body>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
</body>
</html>