i must use css to alter the positions; the only thing that seems to be working is the right position nav bar and the liquid layout, but the "content" and "right navigation bar" is ot being positioned properly.
I want content to be in the middle, leftnavigation on the left, and right navigation on the right.
<title>CSS liquid layout</title>
<style type="text/css">
.due {
color: #ff0000;
font-weight: bold;
}
#leftnavigation{
position:absolute;
left:10px;
top:10px;
width:250px;
}
#rightnavigation {
float:right;
width:250px;
height:800px;
}
#content {
float:center;
}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ccff99">
<div id="app">
<div id="rightnavigation">
<h1>Right Navigation</h1>
link Instructor
Course <a href="http://www,google.com">
Resume
project
</a>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>
This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.
</p>
<h2>Lorem Ipsum</h2>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p>
Page 1 Page 2 <a href="http://www,google.com">
Page
3
</a> Page 4 Page 5 <br />
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor
amum.
</p>
<h2>Lorem Ipsum</h2>
</div>
</div>
You could try this:
CSS
.app {
width: 100%
height: 100%;
}
.due {color: #ff0000;
font-weight: bold;
}
#rightnavigation {
float: left;
width: 33.333%
}
#leftnavigation{
float: left;
width: 33.333%
}
#content {
float: left;
width: 33.333%;
}
HTML
<div class="app">
<div id="leftnavigation">
<h1> Left Navigation </h1>
</div>
<div id="content"></div>
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
</div>
Here's a live demo of the example - EXAMPLE
There are some errors in your HTML and CSS that need to be addressed before changing the styles to accomplish what you need.
In your HTML, there are still some unclosed tags. Especially the <div id="rightnavigation"> tag is never closed, so styles applied to #rightnavigation are actually applied to the entire page.
In your CSS, you apply a style to div.content. But that div has an id of content, not a class. The identifier should be div#content.
In your CSS, you give the div with id leftnavigation a position of "left". This should be "absolute" instead.
Once that is all cleaned up, the left nav is on the left, the content is in the center, and the right nav is on the right. But the center content overlaps the right nav (I assume that is unwanted behavior). To clean that up, without changing the HTML any more, you need to give your sections widths, and set their positions based on the width of their neighboring elements.
Your HTML:
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.</p>
<p>The styled document should look like your printed version/screenshot.
Add styles to the left navigation links to give them borders and a
background color that changes when moused over (hint: Define navigation
links as display:block;). For the right side links, use a different
background color change and border as ashown.
Make the center column "liquid" or "elastic." Use an external (linked)
CSS file. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit
dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
<p> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<p><span class="due">Due Tuesday, September 22.</span> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p><br>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
</div>
And your CSS:
#rightnavigation {
position: absolute;
top: 50px;
right: 0px;
width: 25%;
}
#content {
position: absolute;
top: 50px;
left: 25%;
width: 50%;
}
#leftnavigation{
position: absolute;
top: 50px;
left: 0px;
width: 25%;
}
.due {
color: #ff0000;
font-weight: bold;
}
Related
We have a container with overflow-y:scroll that must have a footer that is sticky (bottom 0) unless the content inside the scrolling container + the height (which is dynamic) of the footer are bigger than the containers height.
HTML:
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
.content and .footer can have more or less content.
If possible, we do not want to use JS for this.
I created a fiddle here with several states: http://jsfiddle.net/bqvtf1zo/1/
Removing position: absolute on .footer solves it for case "little content" (see fiddle), but breaks the other 2 cases.
You need to create a flex container. (Though there are other ways to hande this problem as well: https://css-tricks.com/couple-takes-sticky-footer/)
For the container, set the display to flex and flex-direction to column and give the scrollable content a flex value of 1. Remove positioning from footer, and there you have it.
This will cause the content to stretch to fill the height of the container if any is available, and it will cause the footer to be stuck to the bottom of the content.
For implementation: Be sure to follow up on all the cross-browser issues with flexbox, such as prefixes and bugs. https://github.com/philipwalton/flexbugs
.wrapper{
position: relative;
height: 205px;
width: 200px;
}
.scroll{
border: 1px solid red;
overflow-y: scroll;
height: 100%;
width: 100%;
display:flex;
flex-direction: column;
}
.content{
background-color: #ccc;
flex:1;
}
.footer{
background-color: #efefef;
}
<h1>
little content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content with large footer
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go further down<br>
Some additional content
</div>
</div>
</div>
In my code, my footer will display at the bottom of my page, with no space above or below, as long as I specify a height of my page within Google Chrome. I tried doing height: 100% and so forth but still had problems.
When comparing that to my IE 11, the footer with a specified height has space below it. I can't seem to get both browsers to compromise and I have tried various options to make them both work.
My current css code that would affect the footer is as shown:
html {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
min-width: 768px;
/*keeps footer at bottom of page for IE 11 */
display: flex;
}
/* Formating for body of Web Site */
* {margin: 0; padding: 0;}
body {
font-family: times new roman;
background-color: #ebebeb;
zoom: 75%;
/*keeps footer at bottom of page for IE 11 */
width: 100%;
background-postion: 50% 80%;
}
#screen {
/* This locks everything in place*/
top:0px;
margin: 0 auto;
width:1500px;
height: 1500px;
padding-top:0;
padding-bottom: 30px;
postion: absolute;
margin-left: 70px;
margin-bottom: 0;
}
/* footer formating */
#footer {
background-color: black;
height: 40px;
width: 1500px;
color: white;
padding-top: 10px;
position: relative center;
bottom: 0;
text-align: center;
margin-left:70px;
}
My html:
<html>
<div id = "screen">
<body>
............................................. other code
<div id = "footer">
Copyright Notice - Site Maintanence by **********
<br>
Author of Published Text Content: ************<br>
Pagetop
</div> <!-- end footer -->
</div> <!-- end screen format -->
</body>
</html>
What IE looks like:
if i got you right, you want the footer to "stick" the upper part of the website in both Chrome and IE11 browsers.
i'm not sure why you chose this CSS settings because you didn't supply a link to the full website so i don't know exactly what is going on, but, you can get what you want not just on this two, but in all the browsers, the key is in the structure and the CSS, let me show you.
first of all i arranged your HTML and CSS so it will be easier to read and folow, i also deleted not needed code parts but you can do a reference with the old code to see the changes.
the <div id="screen"> element was outside the <body> tag, so i put it in.
as you can see in the HTML code, i've put <div id="leftcol"> and <div id="centercol"> elements with "lorem ipsum" text to Illustrate the situation in your website. i assumed <div id="screen"> is the website wrapper so i wrapped it all inside it.
<div id="screen">
<div id="leftcol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
<div id="centercol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
<div class="clear"></div>
<div id="footer">
Copyright Notice - Site Maintanence by **********
<br />
Author of Published Text Content: ************
<br />
</div> <!-- end footer -->
<div class="center">
Pagetop
</div>
</div> <!-- end screen format -->
you can see in the CSS i've deleted unnecessary code like i said before, the key is to keep the things simple unless you have to make it complicated for some reason, if you will tell me the reason you need the <HTML> element with display: flex; or <div id="screen"> element with position: absolute; i will try to help you with this and solve the problem but otherwise, let's keep it simple:
*
{
margin: 0;
padding: 0;
}
html
{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body
{
font-family: times new roman;
background-color: #ebebeb;
background-postion: 50% 80%;
}
#screen
{
margin: 0 auto;
}
#footer
{
padding: 5px;
background-color: #000;
color: #fff;
text-align: center;
}
.center
{
text-align: center;
}
#leftcol
{
width: 30%;
float: left;
background: #B4B4B4;
}
#centercol
{
width: 60%;
float: right;
background: #fff;
}
#leftcol, #centercol
{
padding: 2%;
}
.clear
{
clear: both;
}
that's way it's working in all of the browsers include old versions of IE.
example: http://jsfiddle.net/Lvrcw4vw/3/
So I have a web page the content of which I would like to be focused in a center portion with a white background, some 800 pixels wide. The side of the page will be in blue.
The problem is that I don't seem to be able to extend this center div consistently down to the bottom of the page. (The page in question is here.)
<html>
<head>
</head>
<body bgcolor = "#1DAEEC">
<div class = "bodyDiv">
<div class = "accueilBanner">
Logo and navigation items
</div>
<div class = "belowBanner">
<div class = "searchBar">
Search bar content
</div>
<div class = "barredContent">
<div id = "rssNews">
News Feed
</div>
<div id = "descriptif">
Text description here - very long and extends down below the lowest item on the searchBar
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The blue cuts off after the end of the content of the searchBar. I suspect the problem arises from the fact that the searchBar floats left and the barredContent is in absolute position. But there isn't much I can do to tinker the descriptif, since the rssNews floating off to the right and I need to continue having the descriptif wrap around as such :
____________ ___________________________________________________________
| Search Bar |Lorem ipsum lorem ipsum lorem ipsum lorem | RSS NEWS |
| C |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| O |lorem ipsum lorem ipsum lorem ipsum lorem | |
| N |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| T |lorem ipsum lorem ipsum lorem ipsum lorem | |
| E |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| N |lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum|
| T |ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem|____________________<--the white doesn't extend below this point (and it should) and everything below has a blue background (which it shouldn't, apart from the sides)
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
Here's my CSS:
html {
max-width: 800px;
height:100%;
margin: 0 auto;
}
body {
height:100%;
font-family: "Lucida Grande", Tahoma;
font-size: 14px;
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}
.bodyDiv {
min-height:100%;
width:800px;
background-color:#FFFFFF;
margin:0px;
padding: 3px;
}
.accueilBanner {
max-width: 800px;
text-align: center;
position: relative;
}
.belowBanner {
position: relative;
max-width: 800px;
}
.searchBar {
float:left;
width:25%;
font-size: 13px;
}
.barredContent {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 73%;
}
#rssNews {
float:right;
width: 33%;
margin-left: 2%;
margin-bottom: 5px;
font-size: 10px;
}
#descriptif {
text-align:justify;
}
PICTURE:
Is it possible to fix this using only CSS? Or is JavaScript necessary? If so, then what script?
The problem is that .barredContent is absolute positioned.
If you change the style of .barredContent to
.barredContent {
float: right;
width: 73%;
}
it should work as you want.
You can then also remove the height and min-height style properties from your body tag and its first child element.
I hope to have helped you :)
Here is a quick example of how you could achieve this. What you need to do is to add this to your css:
html, body {
width: 100%;
height: 100%;
}
Once you have added this you can now set the height of your divs to 100% so to take the full height of the page.
Here is a FIDDLE show this in practice.
You could more easily solve this problem by putting #rssNews outside and next to .barredContent instead of inside, and adding static width to them, but, if you want a CSS-"hack", this is the only one I know of
.html, .body, .mydiv { height: 100%; }
I'm not sure if it works anymore, but if it does, remember that it used to force the scrollbar to appear because 100% height is more like 102% of what you can actually see in the browser, so you will have to reduce the height to about 98%, if not 97%. It depends on the browser.
I'm coding a webpage that should have a header on top, a footer on bottom, and a side column on the right side. I'm having trouble with getting the footer to be on the bottom of the page. I don't want it to be position: fixed (that'd get annoying), but I do want it to appear at the bottom of the page when you scroll all the way down. (In the case that no scrolling is needed, it should appear at the bottom of the window)
Here's what I'm using. There's probably a pretty simple fix but I don't see what it is. Copy/paste this and you'll see.
<html>
<head>
<style type="text/css">
body {
font-size: 200%;
}
#side {
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: #0A0;
z-index: 100;
}
#header {
height: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #A00;
z-index: 200;
}
#header_push {
clear: both;
height: 40px;
}
#footer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
#footer_push {
clear: both;
height: 50px;
}
</style>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="header_push"></div>
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
</div>
<div id="side">
SIDE COLUMN
</div>
<div id="footer_push"></div>
<div id="footer">
FOOTER
</div>
</body>
Working correctly:
Working incorrectly when scrolling down (see scrollbar on side of page):
You need change the position to fixed
See my comment for an example of how to do this.
But in you situation, just put position:relative on the body.
JSBin
Them the absolute position footer will be in the relative positioned parent and will use its space, so putting bottom:0 will put the footer on the bottom of its _parent.
Some examples of elements with different positions
Hey i made a fiddle using your code. from what i understand this is what you're looking for. let me know if this helps.
Changes done:
CSS
#footer {
height: 50px;
background-color: #00A;
z-index: 150;
}
Link to fiddle : http://jsfiddle.net/daltonpereira/q7Dqg/
Here is JSBIN
Please modify your CSS as below
#footer {
height: 50px;
position: absolute;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
Remove bottom: 0; from #footer{..}
Just want to ask a few questions about this example:
What is the best way to do this 3 column layout these days? Of course there were tables and now there are divs etc etc. What the latest greatest way to accomplish this? If it was totally up to me I'd have a container div, containing 3 other ones. Set to width: 33%; and display: inline;
Also, how does one get those vertical dividers? Again as far as I know you use that in a table and only display certain borders by which you get a vertical rule effect.
But what's the best way these days to get this effect? Having html5 and css3 in your toolbox..
Thanks in advance!
Try this
HTML
<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
CSS
.outer {
background: #734e91;
padding: 12px;
}
.wrap {
margin: 0 auto;
}
.sub {
padding: 12px;
width: 32%;
height: 150px;
background: #734e91;
display: table-cell;
border-right: solid #a175c4 1px;
}
.sub:last-child {
border: 0px;
}
DEMO UPDATED
jsFiddle demo: http://jsfiddle.net/yDXLp/3/
<style>
footer {
background-color: #eee;
margin: 10px auto;
}
footer h2 {
font-size: 1.5em;
font-weight: bold;
}
footer > div,
footer > .divider {
display: inline-block;
vertical-align: middle;
}
footer > div {
padding: 1%;
text-align: center;
width:30%;
}
footer > .divider {
font-style: normal;
height: 240px;
border: 1px solid #888;
-webkit-box-shadow: 1px 2px 1px #ccc;
box-shadow: 1px 2px 1px #ccc;
}
</style>
<footer>
<div>
<h2>Our Client</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>Pay Rates</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
<i class="divider"></i>
<div>
<h2>About US</h2>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<button>Read more</button>
</div>
</footer>
I recommend using box-sizing: border-box; (an alternative way to the standard css box model).
What does box-sizing: border-box; do? If you define the width of a div (e.g. 33%) and add borders and paddings it longer affects the calculated with of your div. It remains 33% of the parent with (33% - (borders + paddings)).
The standard box model adds them to the calculated with of 33% (33% + borders + paddings in our case).
HTML markup:
<div class="footer">
<div class="footer-item item1"></div>
<div class="footer-item item2"></div>
<div class="footer-item item3"></div>
</div>
CSS:
.footer {
box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}
.footer-item {
width: 33%;
float: left;
}
.footer-item + .footer-item {
border-left: 1px solid black;
}
Checkout Twitter Bootstrap(http://twitter.github.com/bootstrap/), Gumby Framework(http://gumbyframework.com/)
These frameworks may provide you readymade functionality for the horizontal bar. Else use borders. Set all borders except right as transparent in color
The css3 way of doing columns is using "column-*" family of properties
They are now supported by all major browsers and there should be no problems with them.
Personally I use these styles in my home site and they provide pretty flexible (perhaps with some small shortcomings) layout formatting.
The best way depends on what you want to achieve. How should the columns behave to resizing of the window etc.
If I was doing something like in the picture I would probably use a fixed width so I could have control of the line width for the text.
By using inline-block you can achieve columns that are collapsed and put under each other on a smaller screen (like a phone)
Try to figure aout the desired behavior first.
EDIT: Oops, I misread and confused horizontal with vertical ;-) I think the other answers explains his enough though.
Correct me if I'm wrong but I think that the css3 column property is for multiple columns for the same text body.