Ok, I leaned html & css back in 2001. I was used to do something like this (To create a website with a "vertical-column" layout):
<html>
<head>
<title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
<tr>
<td id="header" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / header -->
<!-- / content -->
<tr>
<td id="col1" name="menu"><!-- content code/php include --></td>
<td id="col2" name="content_left"><!-- content code/php include --></td>
<td id="col3" name="content_right"><!-- content code/php include --></td>
</tr>
<!-- / content -->
<!-- footer -->
<tr>
<td id="footer" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / footer -->
</table>
</body>
</html>
Easy, everything is automatically aligned the way I want, no css headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div's, but w3c & w3c's validation does not like you using block elements as inline elements...WTF!!!
So...my frustration lead me to ask you guys:
HOW? How to accomplish something like this in "modern way"...as easy as possible? Does html 5 has a better way?
WHY? Why is it that now we should not use this table approach to get a "vertical column layout" on a website?
HOW?
Option 1: Google 'CSS 3 column layout'. This is has been well covered over the past 6 years or so and there's gobs of tutorials out there.
Option 2: Google 'CSS Framework' and pick one to build your layout. 960.gs is a popular one.
WHY?
Ideally, you'd use tables for tabular data and css to layout the rest of the page. Why? Well, in theory, CSS gives you a lot more flexibility. The best example is probably when it comes to responsive web design. On an iPhone, I may want 2 columns. On my iPad, I may want 4 columns. That can all be done with CSS, but gets really complicated if you hard-wire the HTML using tables.
Below is a basic grid I cobbled together you can use with any size website. You'll need to clear the floats on the columns with either overflow hidden or a clearfix. If your project doesn't need to support IE7 you can use box-sizing border-box to add padding to your columns, otherwise add an extra element inside each column for padding.
Whilst I can appreciate that making columns was super easy with tables that was pretty much the only thing they were better for layout wise.
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<div class="content grid">
<div id="col1" class="col s1of3"></div>
<div id="col2" class="col s1of3"></div>
<div id="col3" class="col s1of3"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
.grid {
}
.grid .col { float: left; }
.grid .col.s1of1 { width: 100%; }
.grid .col.s1of2 { width: 50%; }
.grid .col.s1of3 { width: 33.33333333%; }
.grid .col.s2of3 { width: 66.66666666%; }
.grid .col.s1of4 { width: 25%; }
.grid .col.s3of4 { width: 75%; }
.grid .col.s1of5 { width: 20%; }
.grid .col.s2of5 { width: 40%; }
.grid .col.s3of5 { width: 60%; }
.grid .col.s4of5 { width: 80%; }
CSS3 has some neat column layout options, but they're not very good compatability-wise, and a fair number of the options aren't supported by a large number of browsers.
If you're seeking to make columns of variable/fixed width, then this is probably the article you're looking for:
http://www.alistapart.com/articles/holygrail
Using this method, you can set one or more divs to a fixed width, while having another resize appropriately to fill the page.
If you just want all your columns to resize, then just make them all float: left, and width: {percentage of page}%
Related
I want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/
I spent a little while trying to figure out how to achieve the following effect without using a table but couldn't figure it out: http://jsfiddle.net/sKFzA/
CSS :
.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
HTML :
<table class="header">
<tr>
<td class="titleCol">This is the blog title</td>
<td class="dateCol"> <span> </span><span class="dateText">1/23/2012</span>
</td>
</tr>
</table>
To explain it, I have a blog title and a blog date. The title could be long and wrap. At the end of the last line, wrapped or not, I want the blog date to be aligned to the right.
So I have two questions. Is there any reason not to use a table for this? If so, how would you achieve it without assuming static font sizes?
CSS has properties that allow any element to behave like specific components of a table.
http://cssdeck.com/labs/rjiesryc
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
CSS
header {
display: table;
width: 100%;
}
header h1, header time {
display: table-cell;
}
header time {
/*vertical-align: bottom;*/
}
With the help of cimmanon and the others, I've gathered that:
The only reason's not to use a table here is because layout is not technically a table's intended purpose and also by not using a table you can separate your layout (CSS) from your markup (HTML). However, if I were to use a table, I am not aware of of any negative effects.
There doesn't seem to be a good solution to this exact layout without the concept of table, but my table solution can be achieved without using an HTML table by applying styles to display other elements as the table. So I replaced my table elements with divs. The span with the space before the date allows the smaller sized date to stay aligned to the title's baseline without having to hard-code line height's or font sizes. So if the font sizes change, I don't have to worry about updating any other magic numbers hard-coded around them.
http://jsfiddle.net/K35gT/
HTML
<div class="header">
<div class="titleCol">This is the blog title</div>
<div class="dateCol">
<span> </span><span class="dateText">1/23/2012</span>
</div>
</div>
Styles:
.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
You do not need tables at all, simply block elements with the right styles.
If it was my website, I would do this:
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
Combined with this CSS:
header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}
You can decide if you want to use HTML5 elements, or general elements and if you want to hook in class names or not. Here's the jsFiddle for above: http://jsfiddle.net/sKFzA/13/
Something like this? I hope i got you right.
HTML:
<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>
CSS:
#titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif;
float:left;text-align: left;}
#dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
#spandate { position: absolute; bottom: 0; right: 0;}
See here: http://jsfiddle.net/sKFzA/31/
I really need help converting this simple table structure to css div's. Is there a simple application or something. CSS divs are driving me insane.
<table width="100%" border="0">
<tr>
<td colspan="3" id="Header"></td>
</tr>
<tr>
<td width="20%" id="Nav2"></td>
<td width="40%" id="ContentMiddleLeft"></td>
<td width="40%" id="ContentMiddleRight"></td>
</tr>
<tr>
<td colspan="3" id="BottomContent"></td>
</tr>
</table>
Test this:
EDIT: http://jsfiddle.net/DCbgg/
<style type="text/css" media="screen">
.container {
width: 100%;
}
.left20 {
width: 20%;
float: left;
background: red;
}
.left40 {
width: 40%;
float: left;
background: green;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="left20">
Left
</div>
<div class="left20">
Left
</div>
<div class="left40">
Left
</div>
<div class="clear"></div>
<div class="left20">
Left
</div>
<div class="left20">
Left
</div>
<div class="left40">
Left
</div>
</div>
<div class="clear"></div>
First Things First
There are some very important things to remember when changing from table to div layouts that generally apply to all new learning experiences.
Don't get frustrated just because something's not working. Just take a break, look at something else, remember that it's something new and it won't always work the first time. It may take a number of different approaches and attempts before it finally works. You'll get the hang of it eventually.
Especially in this case, remember that divs are vastly different from tables, especially when using them as a major structural part of a site. The thought process behind each is completely different and can take a lot of getting used to for it to click. Because of this:
Not all designs transfer from table to div. Some things are only really easily and properly accomplished with tables, and others with divs. While this is not one of those cases in particular, be open to having to make some design changes when changing your site structure.
That being said, we can now answer the question properly.
An Answer
This is how I would set up the structure using divs:
<div id="wrap">
<div id="header"></div>
<div id="content">
<div id="nav2"></div>
<div id="content_right"></div>
<div style="clear: both"></div>
</div>
<div id="footer"></div>
</div>
And this is what the css would be:
#wrap {
width: 100%;
}
#header {
width: 100%;
height: /* some height value */;
}
#content {
width: 100%;
height: /* some height value */;
}
#nav2 {
width: 20%;
float: left;
}
#content_right {
width: 40%;
float: right;
}
#footer {
width: 100%;
height: /* some height value */;
}
Notes
As I was saying above, the thought process behind tables and divs are quite a bit different. With tables, you're used to using percentages (%) to define widths. This works and is not necessarily a bad thing. It gets the job done and is easy to do.
But when you're using divs, a more common approach is to have fixed widths defined by pixels (px). This allows for a more constant design that won't stretch across the page, and gives you more design freedom, knowing that the page will always be the same width.
For more information on fixed-width design, I would recommend looking at the 960 grid system. It is extremely easy to follow and leads to clean, good-looking designs that are easy to structure and style.
Most importantly, enjoy the new-found freedom that divs bring. They aren't locked in to anything and can literal do anything, be anywhere, and look like anything on a page. There isn't really a limit to what they can do. I've heard them called the only required part of a webpage (You really can design and create an enter page with just divs, text included).
Have fun on your journey!
CSS3 Style (using "display:table;"):
Check http://jsfiddle.net/reKfe/ (jsFiddle made from http://query7.com/exploring-the-power-of-css3)
I have a question about a problem, of which I originally thought, that it would be fairly simple to solve. But apparently it is not - at least not with only CSS.
This is the basic situation:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
I have a wrapper div that fills up 90% of the screen height and two inner divs. The first div "top" contains some varying elements. The second div "content" should fill out the remaining space of the wrapper div.
So far, I haven't found a way to set the div "content" to fill up the remaining space - even if I would know the exact height of the div "top" as I only know the relative height of the wrapper div.
Thus, I would be happy to learn of a method to either the div "content" to fill up the remaining space or how to mix relative and absolute sizes (i.e. height:100%-100px).
There is currently no cross-browser solution to achieve what you're trying with div elements and CSS. You can however get the behavior you want with the tried and true method of using a table instead.
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
EDIT:
It appears I stirred a nest of hornets with my answer. There seems to be a near-religious following of people who say using tables for layout is bad. In many cases that is absolutely true, however there are situations where a table will do what CSS cannot. This is one of those situations, where a CSS alternative is on the horizon, but most browsers do not support it yet. It is up to the site designer to decide whether he wants to have a layout with cross-browser functionality now, or use a pure CSS layout with its limitations that may become easier to maintain in the future.
Your HTML code is really wrong:
don't use comma's after attributes
don't use inline CSS, put all CSS in a stylesheet and load the stylesheet in your HTML page
CSS syntax is: propertie: value; example: width: 10px; not: width=10px
To use 100% - 100px you can use CSS3 calc, but this feature has less browser support. You can use JS to make a sort of calc function.
There is no cross-browser way to get the content div to fill all available space with CSS, but it is fairly easy to make things look as if it did:
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This should be sufficient for most situations, unless you want to use something like an onmouseover handler on the content.
Here is what I'm trying to do.
I want layout with three columns. Lets call them left, middle and right column. I can't figure out what to do so when the content of main increase the height of left and right columns to increase also ?
I'd suggest checking out this link for a great example of a 3 column liquid layout. Just view the source for the example of the HTML and CSS. He also provides examples of various other layouts (see the tabs at the top of the page).
Here is an excellent website: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts that has a whole bunch of different layouts that are all CSS based.
HTML:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 Columns</title>
</head>
<body>
<div class="container">
<div class="left">
<h3>Left Column</h3>
</div>
<div class="center">
<h3>Center column</h3>
/div>
<div class="right">
<h3>Right column</h3>
</div>
</div> <!-- /container -->
</body>
</html>
CSS:
.container {width: 800px; border:1px solid red; overflow:auto; }
.left {width: 250px; border:1px dashed green; float:left}
.center {width: 250px; border:1px dashed green; float:left}
.right {width: 250px; border:1px dashed green; float:left}
See the demo here:
http://jsfiddle.net/z2SLL/1/
I would strongly recommend against using the <table> element simply because for semantic reasons, we are not talking about displaying tabulated data.
Instead, exploit the display properties using values like "table", "table-row" and "table-cell". Here is a demo: http://jsfiddle.net/teddyrised/DLaCW/20/. You can see that although the content of each column varies, their overall height follows that of the tallest <div>.
Maybe the faux columns technique is what you need. Check it out here, here and here.
If you need it to be liquid or with no images (for whatever reason) then you might have to use some javascript like this example or you can check this weird example.
Anyway, with the little information there's not too much to offer because there's a lot of variables and different solutions.