I'd like to put two columns on the side of the content div. The part I have problems with is that I want the columns being built from 3 parts. The top and bottom should have fixed heights, but the middle one would adjust depending on the content height. Look at the sample with one column:
<html>
<head>
<style>
* { border: 1px solid black;}
#contentWrapper { width:450px; }
#leftColumn { width:100px; float: left; }
#leftColumnTop { width:100px; height:50px;
background-color: gray; }
#leftColumnMiddle { background-color: red; }
#leftColumnBottom { width: 100px; height:50px;
background-color: gray; }
#content { width: 300px; float: left; }
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumn">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
</div>
<div id="content">content<br> here <br>more
<br>more <br>more <br>more <br>more
<br>more <br>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>
What I want is the #leftColumnBottom stick at the top of the footer and red #leftColumnMiddle to fill the space between top and bottom part.
This works in everything except IE6; for that you'll need a conditional comment and css expression to set a height instead of bottom on #leftColumnMiddle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>* { border: 1px solid black;}
#contentWrapper { position: relative; float:left; width: 450px; }
#leftColumnTop { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; }
#leftColumnMiddle { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; }
#leftColumnBottom { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; }
#content { width: 300px; float: left; margin-left: 100px;}
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
<div id="content">content<br>
here<br>more<br>more<br>more<br>more<br>more<br>more<br>
</div>
</div>
<div id="footer">footer text</div>
</body>
</html>
And to the commenter - it nearly worked, so that's why. ;)
try min-height for the one that needs to grow
If you need both columns to be of equal height, and work in IE6, you basically have to hack.
A solution I've used in the past involves setting up a fake margin/padding for one of the columns. This assumes that you know a upper limit of how large the columns can grow (could be in the magnitude of several thousand px's).
This solution is outlined here.
Quoting from the page I linked:
The basic method works like this:
Blocks which will act as columns must be wrapped in a container element
Apply overflow: hidden to the container element
Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a large enough value to guarantee that it's equal to or larger than the tallest column
Apply margin-bottom: -$big_value to the column blocks
Related
I have a vertical line running down the middle of my page, but it only goes as far as the first section. What I want it to do is run all the way down to the very end of the page when you scroll all the way down. I'm not sure how to achieve this.
Right now my CSS for my line is this:
.line{
position: absolute;
top: 100px;
margin: auto;
width: 50%;
height: 100%;
border-right: 1px dotted black;
}
I don't want to have a set height, because as I start adding more projects to the site, I would like the line to grow with the page without having to change the height every time.
Here's a codepen: https://codepen.io/Furr/pen/gJLapb
This website is my inspiration, I would like it to be something like this: https://www.rezo-zero.com/projects/
Thanks in advance.
I think you may actually want 3 divs like this. ( the line is a div)
.vl {
border-left: 1px dotted black;
height: 500px;
}
#parent {
display: flex;
}
#right {
width: 300px;
margin-left: 5px;
}
#left {
flex: 1;
}
<div id="parent">
<div id="left">Left Side</div>
<div class="vl"></div>
<div id="right">Right Side</div>
</div>
another reason to have 3 divs is that you can "break up" the line with clickable content just like in your example
One of feasible way is to use pseudo element to make the vertical line so that it will expand according to the container. Here is an simple example.
.timeline-container {
position: relative;
width: 500px;
margin: 0 auto;
}
.timeline-container:after {
content: " ";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #000;
}
.timeline-container .event {
width: 50%;
}
.timeline-container .event.left {
text-align: right;
}
.timeline-container .event.right {
margin-left: 50%;
}
.timeline-container .event-content {
margin: 10px;
}
<div class="timeline-container">
<div class="event left">
<div class="event-content">2019-05-14<br>Testing Events</div>
</div>
<div class="event right">
<div class="event-content">2019-05-10<br>Another Events</div>
</div>
<div class="event left">
<div class="event-content">2019-04-25<br>Great Exhibition</div>
</div>
<div class="event right">
<div class="event-content">2019-03-27<br>School Festival</div>
</div>
</div>
You can look at the source code for the website you wanted to emulate by typing CTRL + SHIFT + I in Chrome after opening it.
I'm trying to close-pack html boxes that that are dynamically generated, meaning that their size can't be predicted. And I want to do this WITHOUT using javascript.
Here is an example that does NOT work in the way that I want it to:
<html>
<head>
<style>
#information { border: 3px solid orange;}
.abs { float: left; width: 15em; height: 10em; background-color: pink; }
.two { width: 12.5em; height: 12.5em; background-color: lightblue; }
.three { width: 10em; margin-top:;height: 10em; background-color: lightgreen; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="information" style="width:28em">
<div class="abs">1</div>
<div class="abs two">2</div>
<div class="abs three">3</div>
<div class="clear"></div>
</div>
</body>
</html>
Here there is a vertical gap between the "1" and the "3" box that I want to remove. In this example I could just do this:
<div class="abs three" style="margin-top:-2.5em">3</div>
But in the general case I don't know the sizes of the single boxes nor the size of the surrounding box.
Is there a way of doing this using only html + CSS or is there not?
There is a large white gap between the first row of columns and the second row.
JSFiddle: https://jsfiddle.net/5o3ug26g/
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar { width: 160px; height: 600px; }
.left { float: left; background: forestgreen; }
.right { float: right; background: steelblue; }
</style>
</head>
<body>
<div>
<div class="left sidebar"></div>
<div class="right sidebar"></div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Text on top of the page</div>
<div class="col-md-6">Other text on top of the page</div>
</div>
<div class="row">
<div class="col-md-6">I want this to be right below the "Text on top of the page" but it isn't...</div>
<div class="col-md-6">... and I want this to be right below the "Other text on top of the page" but it isn't</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I remove the row classes then the gap disappears, but this problem appears also when using Bootstrap navbar-s and other containers with :after { display: table; }, so just removing the row classes is not a solution.
I tried adding clearfix in a bunch of places but to no avail.
This is an extract from a more complex responsive layout and I'd rather avoid refactoring it all.
What is the easiest fix?
You can position your left and right sidebars absolutely instead of floating them. The floats are interfering with the bootstrap layout.
.left { background: forestgreen; position:absolute; left:0; top:0; }
.right { background: steelblue; position:absolute; right:0; top:0;}
Live example forked from yours: https://jsfiddle.net/5fk5900s/1/
Marcelo is correct. You've already added margins to the content to account for the side bars. Here is a fiddle with the absolute positioning changes:
https://jsfiddle.net/5o3ug26g/1/
.content {
margin-left: 170px;
margin-right: 170px;
}
.sidebar {
position: absolute;
width: 160px;
height: 600px;
}
.left {
left: 0px;
background:
forestgreen;
}
.right {
right: 0px;
background: steelblue;
}
I'm trying to make sure I understand it fully. Suppose I want a page that is exactly 600 pixels wide and 1000 pixels tall, separated into 3 equally-spaced columns by divs with borders of 1 pixels each. Then the divs should each be 998 pixels high and 198 pixels wide, and they should be positioned absolutely with respective (top, left) positions of (0,0), (0,200) and (0,400), because a 600-pixels-wide body corresponds to absolute horizontal pixel positions of 0 through 599. These 3 divs will take up the entire width of the body. I don't have to worry about margins of the divs or padding of the body because those values are irrelevant when absolute positioning is active. Correct?
Here's my code:
<html>
<head>
<title>div practice</title>
<style type="text/css">
body
{
height: 1000px;
width: 600px;
}
.outercol
{
position: absolute;
width: 198px;
height: 998px;
border: solid 1px black;
}
#co1
{
top: 0px;
left: 0px;
}
#co2
{
top: 0px;
left: 200px;
}
#co3
{
top: 0px;
left: 400px;
}
</style>
</head>
<body>
<div class="outercol" id="co1">
<p>This text is inside column 1</p>
</div>
<div class="outercol" id="co2">
<p>This text is inside column 2</p>
</div>
<div class="outercol" id="co3">
<p>This text is inside column 3</p>
</div>
</body>
</html>
This is what happens when you add padding to the div's now. DEMO
Instead try something like what i have below. It uses percentages which makes it a little bit more difficult but it will work out better in the long run.
HTML:
<div id="container">
<div class="block">
Block 1
</div>
<div class="block">
Block 2
</div>
<div class="block">
Block 3
</div>
</div>
CSS
#container {
width: 600px;
height: 500px;
display: block;
overflow: auto;
}
.block {
float: left;
width: 31%;
padding: 1%;
border: 1px solid black;
}
DEMO
To increase the padding, you take the width down by 1% and you have an extra .5% to add to the padding.
Example:
width: 31%;
padding: 1%;
becomes
width: 30%;
padding: 1.5%;
and the same goes for the other way.
Hope this all makes sense
I have created two rounded corner boxes which i would like to be aligned next to each other .But the 2nd box is appearing directly below the first one inspite of me using float:left on the 1st one. Any way to fix this would be really helpful. Below are the html and the css.
The HTML :
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="layout.css"/>
</head>
<body>
<div id="containerDiv">
<!-- Box 1 -->
<div id="box1" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
<!-- Box 2 -->
<div id="box2" class="boxDiv">
<div class="upperRound"></div>
<div class="boxTagLine">
Some Tag Line
</div>
<div class="boxContent">
Heres some content
</div>
<div class="lowerRound"></div>
</div>
</div>
</body>
</html>
The CSS :
#containerDiv {
width: 1000px;
}
.boxDiv {
width: 248px;
}
.upperRound {
background-image: url('rounded_upper.gif');
height: 20px;
}
.lowerRound {
background-image: url('rounded_lower.gif');
height: 20px;
}
.boxContent,.boxTagLine {
border-left: 2px solid #B5B5B5;
border-right: 2px solid #B5B5B5;
padding: 10px;
background-color:#F8F8F8;
solid #B5B5B5;
}
.boxTagLine {
color:#0066FF;
}
#box1 {
float:left;
}
Second div must float to right and next element should clear float. I'll add more info in a second.
I was a bit wrong. You even don't need clearing div.
Check out this question.
So - in your case, add this to css=>
#box2 {
float:right;
}
#containerDiv {
width: 1000px;
overflow: hidden;
}
I didn't try it, but it should work.
Mine approach will leave space between boxes. So - it might be not desired effect.
You would be better off using spans
But if you have to use divs :
.boxDiv {
width: 248px;
display: inline;
}
float both boxes left:
#box1,#box2 {
float:left;
}
You'd be better off floating your .boxDiv left, like so:
.boxDiv {
width: 248px;
float: left;
}
That way if you add more boxes they'll float straight away, otherwise you'd have add the specific class names:
#box1, #box2, #box3, #box4 {
float:left;
}