I have my entire page now in Divs but I now am making a list of something that uses 3 table collumns(or whatever they are called).
How can I create a similar effect using divs:
<!-- HTML -->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- END HTML -->
That but then using divs.
I have already tried something similar using the Float element(function..) but if I used 2 floating divs in 1 div my layout always messes up.
So how could I do this?The CSS:
#navigation {float: left; width: 10em;}
#navigation2 {float: right; width: 10em;}
#content {margin: 0 10em;}
The HTML code for the divs (just the div tags, not the full HTML page):
<div id="navigation"><!-- nav content here --></div>
<div id="navigation2"><!-- nav2 content here --></div>
<div id="content"><!-- main content here --></div>This is the best 3 columns css layout that I found on net... Read it carefull! To get what you want this "tutorial" uses "fake columns"... So the 3 columns aren't how you see them. Use a border for each column to see the real divs. The effect of 3 collums is obtained using a image background...
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/piefecta-rigid.htmldepending">http://www.positioniseverything.net/pie ... ldepending</a><!-- m --> on your needs within a "container" div you can also float:left a series of smaller divs
<!-- m --><a class="postlink" href="http://diamondspcp.com/index.php?cPath=56NONEtry">http://diamondspcp.com/index.php?cPath=56NONEtry</a><!-- m --> something like
#topnav {
height: 25px;
width: 750px;
text-align: right;
}
#topnav ul li {
display: inline;
text-decoration: none;
padding-left: 32px;
margin: 0;
}
#topnav ul
{
padding: 0px 5px 0px 0px;
margin: 0;
}
followed by something like
<div id="topnav">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
<li>link7</li>
<li>link8</li>
</ul>
</div>
You may need to play around with the number depending on you space, font size, etc.
How can I create a similar effect using divs:
<!-- HTML -->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- END HTML -->
That but then using divs.
I have already tried something similar using the Float element(function..) but if I used 2 floating divs in 1 div my layout always messes up.
So how could I do this?The CSS:
#navigation {float: left; width: 10em;}
#navigation2 {float: right; width: 10em;}
#content {margin: 0 10em;}
The HTML code for the divs (just the div tags, not the full HTML page):
<div id="navigation"><!-- nav content here --></div>
<div id="navigation2"><!-- nav2 content here --></div>
<div id="content"><!-- main content here --></div>This is the best 3 columns css layout that I found on net... Read it carefull! To get what you want this "tutorial" uses "fake columns"... So the 3 columns aren't how you see them. Use a border for each column to see the real divs. The effect of 3 collums is obtained using a image background...
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/piefecta-rigid.htmldepending">http://www.positioniseverything.net/pie ... ldepending</a><!-- m --> on your needs within a "container" div you can also float:left a series of smaller divs
<!-- m --><a class="postlink" href="http://diamondspcp.com/index.php?cPath=56NONEtry">http://diamondspcp.com/index.php?cPath=56NONEtry</a><!-- m --> something like
#topnav {
height: 25px;
width: 750px;
text-align: right;
}
#topnav ul li {
display: inline;
text-decoration: none;
padding-left: 32px;
margin: 0;
}
#topnav ul
{
padding: 0px 5px 0px 0px;
margin: 0;
}
followed by something like
<div id="topnav">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
<li>link7</li>
<li>link8</li>
</ul>
</div>
You may need to play around with the number depending on you space, font size, etc.