|
CSS - Floating Without Tables
i am trying to make a menu so it goes all the way to the right of the screen in my header. I have an image to the left. I want the menu always to be at the right no matter what the user does to the screen. I have gotten the effect that i want but i had to use tables. I want to avoid using tables.
Here is the link to the webpage of the desired effect using tables: http://skonline.org/courses//support-courses/glenn/jana2-diffmenu.htm I have attached the css and copy and pasted the parts of importance div#header { margin-bottom: 0px; padding: 2px; background-color: white; background-image: url(airplane.gif); position: relative; } #header div#rightnav { position: absolute; right: 0; top: 0; width: 232px; } .header-title { background: transparent; padding-left: 7px; color: rgb(68, 34, 0); vertical-align: middle; font-weight: bold; font-size: 180%; } .header-rt-nav { width: 130px; margin: 0px; padding: 0px; border-left: 1px solid rgb(68, 34, 0); border-right: 1px solid rgb(68, 34, 0); vertical-align: middle; font-weight: bold; color: rgb(68, 34, 0); } .header-rt-nav ul { margin: 0px; padding: 0px; font-size: medium; font-weight: bold; color: rgb(68, 34, 0); line-height: 19px; white-space: nowrap; } .header-rt-nav li { list-style-type: none; display: block; } .header-rt-nav li a { padding: 1px 5px; text-decoration: none; color: rgb(68, 34, 0); } .header-rt-nav li a:link { color: rgb(68, 34, 0); } .header-rt-nav li a:visited { color: rgb(68, 34, 0); } .header-rt-nav li a:hover { color: white; background-color: rgb(68, 34, 0); } THanks! Similar TutorialsHello all, Slight issue with everyone's favorite web browser - my tables keep floating to the bottom of the page. Any ideas what I'm doing wrong? Here's a simple example: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
html{ height: 100%; }
BODY{
font: 0.8em "lucida", "verdana", "arial", "tahoma", "verdana", sans-serif;
font-size: 76%;
width:100%;
background: #fff;
margin: 0;
padding: 0;
height: 100%;
}
img{border-style: none;}
a:link, a:visited, a:active{ color: #07b; text-decoration: none; border-bottom: 1px dotted #036;}
a:hover{ border-bottom: 1px solid #69c; background: #E5F2FF; }
#wrap{
background:url( /img/bg200.gif ) top left repeat-y;
min-height: 100%;
margin: auto;
position: relative;
}
* html #wrap{ height: 100% }
#clearfooter{
clear:both;
height: 40px;
overflow: hidden;
}
#logo{
text-align:center;
height:7em;
margin:0;
padding-bottom: 2em;
font-family: "lucida", "verdana", sans-serif;
font-weight: bold;
}
#logo h1{
font-size: 4em;
color:#07b;
margin: 0;
padding:0;
}
#logo h2{
font-size: 3em;
margin: 0;
padding: 0;
}
#logoimg{ float: left; margin: 1em; }
#footer{
position: absolute;
bottom: 0;
font-size: xx-small;
height:40px;
border-top: 1px dotted #000;
width: 100%;
text-align: center;
}
#nav{
float: left;
width: 200px;
font-weight: bold;
}
#nav ul
{
padding: 0.2em;
margin: 1em;
list-style-type: none;
background: #fff;
border: 1px solid #07b;
border-left: 1em solid #07b;
}
#nav a{ border: 0; display: block; }
#nav a:hover{ background: #E5F2FF; border: 0; color: #036; }
#nav ul li{ display:block; color: #000; text-decoration: none; border-bottom: 1px dotted #69c; }
#nav ul li:hover{ background:#E5F2FF; display:block; border-bottom: 1px solid #69c;}
#logos{ padding: 0; align: center; text-align: center; }
#logos a{ border: 0; padding: 0.3em 0 1em 0; }
#logos a:hover{ background: #fff; border: 0; }
#search
{
padding: 0.2em;
margin: 1em;
}
#content{
position: relative;
margin-left: 200px;
padding: 0 1em 1em 1em;
}
/* Tables */
.data { }
.data table { border: solid #f0f0f0 1px; width: 100%; }
.data th { border: solid #f0f0f0 1px; background-color: #f0f8ff; font-weight: bold;}
.data tr {}
.data td { border: solid #f0f0f0 1px;}
.highlight{ background: yellow; }
</style>
<title>title</title>
</head>
<body>
<div id="wrap">
<!-- LPAN -->
<div id="lpan">
( some banner )
</div>
<!-- LOGO -->
<div id="logo">
<h1>Page</h1>
<h2>Title</h2>
</div>
<!-- Navigation -->
<div id="nav">
<ul>
<li><a href="/link/" title="Home">Home</a></li>
<li><a href="/link/a.php" title="a">a</a></li>
<li><a href="/link/b.php" title="b">b</a></li>
</ul>
<ul>
<li><a href="/bork/" title="bork">bork</a></li>
<li><a href="/bork/bork/" title="bork bork">bork bork</a></li>
<li><a href="/bork/bork/bork/" title="bork bork bork">bork bork bork!</a></li>
</ul>
<div id="search">
<form action="search.php" method="get" accept-charset="UTF-8" >
<input type="text" name="query" value="" id="query" size="15" maxlength="60"/>
<input type="hidden" name="type" value="both" />
<input type="submit" value="search" />
</form>
</div>
<!-- AFFILIATE LOGOS -->
<div id="logos">
<p>
<a href="http://example.com" title="Example.com">
<img alt="example" src="/img/example.gif" height="50" width="179" /></a>
</p>
</div>
</div>
<!-- Begin Content -->
<div id="content">
<h1> Title </h1>
<div class="data">
<table>
<tr>
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
</tr>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td> E </td>
<td> F </td>
</tr>
</table>
</div>
</div>
<!-- Begin Footers -->
<div id="clearfooter"></div>
<div id="footer"> Feet </div>
</div><!-- end wrap -->
</body>
</html>
--Simon Hi everyone. Im facing a problem. Basically I have one large table, with 4 rows. In each row it has two tables, the tables are floating left to each other, with some margin properties inside the <td> tags. If you would please look here. http://www.thehundreds.com/ideaforum/betahelp.htm ... As you can see, im using a pattern. A new row, each new row has two tables that float too each other. everything is aligned correct until I get to my 4th row. for some reason it wont float left anymore to the procedding row. Anyone know why it does this? I added a new class for the fourth set of tables, and made it clear both on the float, and this happends. http://www.thehundreds.com/ideaforum/beta1.htm ... See now the 4th table on the left works, but the right does not. If anyone can help me out here I would really appreciate it. Thanks a ton. I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
I'm Having problems getting my footer to stay below the content of my page. here's the link to my page. http://www.netgamegurus.com/ main page html Code:
<body>
<div class="container">
<div class="header">
<?php include_once("pages/header.php"); ?>
</div>
<div class="main_body">
<?php include_once("pages/index_body.php"); ?>
</div>
</div>
<div class="clearfooter">
</div>
<div class="footer">
<?php include_once("pages/footer.php"); ?>
</div>
</body>
</html>
main page CSS Code:
body {
background-color: #FFFFFF;
text-align:center;
}
body,html {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 100%;
width: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.container {
position:relative;
padding:0px;
margin:0px;
margin-bottom: -150px;
width:100%;
height:100%;
background-color:#666;
}
.header {
}
main_body {
}
.clearfooter {
clear:both;
height:150px;
}
.footer {
position:relative;
height:150px;
margin: -150px auto 0 auto;
}
index_body html Code:
<body>
<div class="left_col">
<?php include_once("left_col_index.php"); ?>
</div>
<div class="right_col">
<?php include_once("right_col_index.php"); ?>
</div>
</body>
</html>
index_body CSS Code:
.left_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:0px;
width:150px;
height:100%;
background-color:#00F;
}
.right_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:150px;
width:857px;
height:105%;
background-color:#0C3
}
I've looked up a ton of info on this on google, but nothing seems to help. Anybody got an idea on this? Hallo, I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/ but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute. Does some know a good source where I find more information or documented examples ? Finally I can fix my problems, but it take so much time of testing... Thnaks Hi, I'm getting very frustrated trying to float in image to the right and vertically aligned in a TD cell. This is a actually a vBulletin Forum Home Page and I want to display an image in the forum description. With the inline CSS below I keep getting a new line which I don't want. I want the text "Forum description goes here" with the image vertically aligned on the right hand side of the TD cell. Code: <td class="alt1Active" align="left" id="f34"> <div> <a href="http://www.myurl.co.uk/forums/test_forum/"><strong>Test Forum</strong></a> </div> <div class="smallfont"> Forum description goes here. <!-- *** THIS IS THE BIT I HAVE CONTROL OVER *** --> <div align="right" valign="top" style="float:right;"> <a href="http://www.myurl.co.uk"> <img src="http://www.myurl.co.uk/picture.jpg" style="border:0px;"> </a> </div> <!-- ****** --> </div> </td> Hi again could someone help me figure out why my left and right box's on thid design are not inline with the content (middle) box thanks see attached pic to see what i mean. Code:
CSS CODE
body {
background:#ffffff;
color:#000000;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
/*** Main container ***/
#container {
background:#EAEAEA url() repeat-x;
color:#000000;
width:90%;
margin:5px;
min-width:770px;
padding:0;
}
/*** Content ***/
#content {
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
height:500px;
margin:5px;
}
/*** Main Banner ***/
#Banner {
background-color:#EEEEEE;
height:55px;
border:1px solid #DEDEDE;
padding:15px 20px 5px;
margin:5px;
}
/*** Left Side Navigation ***/
#SideNav {
width:15%;
float:left;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
min-width:200px;
padding:15px 20px 5px;
margin:3px;
}
/*** Right Side content ***/
#RightCon {
float:right;
width:15%;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
min-width:200px;
margin:3px;
}
Thanks Please view the attached image. I want it as; left arrow - gallery - right content all on same line. css Code:
#content #gallery { float:left; width:100%; }
#content #gallery .list { float:left; border: 1px solid black; background-color: #dfdfdf; }
#content #gallery .list li img, #content #gallery .list li p { width: 200px; height: 150px; margin: 10px; }
#content #gallery a.galleryprev, #content #gallery a.gallerynext { display: block; float: left; width: 28px; height: 150px; text-decoration: none; background: url("http://www.gmarwaha.com/image/imageNavLeft.gif") left 60px no-repeat; }
#content #gallery a.gallerynext { background: url("http://www.gmarwaha.com/image/imageNavRight.gif") right 60px no-repeat; }
#content #gallery a.gallerynext:hover { background-image: url("http://www.gmarwaha.com/image/imageNavRightHover.gif"); }
#content #gallery a.galleryprev:hover { background-image: url("http://www.gmarwaha.com/image/imageNavLeftHover.gif"); }
#content #gallery a:hover, #content #gallery a:active { border: none; outline: none; }
html Code:
<div id="gallery">
<a href="#" class="galleryprev"> </a>
<div class="list">
<ul>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/1.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/2.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/3.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/4.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/5.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/6.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/7.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/8.jpg" alt="" width="200" height="150" /></li>
</ul>
</div>
<a href="#" class="gallerynext"> </a>
</div>
I am having problem layout out a series of spans in a row... The code I am using should output: ITEM1 ITEM2 ITEM3 ITEM4 ITEM5 ITEM6 ITEM7 but it is outputting ITEM1 ITEM2 ITEM3 ITEM4 ............................................. ITEM5 ITEM6 ITEM7 It steps down a line when the drop down navigation makes an appearance. The code I have is: CSS: PHP Code: .textbox { position: relative; clear: right; float: left; padding-right: 17px; padding-left: 17px; border-right-width: 1px; border-right-style: solid; border-right-color: #DAEEAC; } a { color: #FF6600; } ul { padding: 0; top: 0px; list-style: none; } li { float: left; position: relative; width: 100px; } li ul { display: none; position: absolute; top: 2em; left: 0; background-color: #e7e7e7; } li > ul { top: 15px; left: 5px; } li:hover ul, li.over ul{ display: block; } HTML: PHP Code: <div id="navbackground"> <div class="navholder"> <table width="600px" height="15" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <span class="textbox"><a href="index.php" class="navtext">Homepage</a></span> <span class="textbox"><a href="packages.php" class="navtext">Packages</a></span> <span class="textbox"><a href="booking.php" class="navtext">Booking</a></span> <ul id="nav"> <li><span class="textbox" style= "height:45px; width: 100px;"><a href="booking.php" class="navtext">Gallery</a></span> <ul> <li><a href="#">Ground Shots</a></li> <li><a href="#">Recent Events</a></li> <li><a href="#">Hen Parties</a></li> <li><a href="#">Lorem Ipmus</a></li> </ul> </li> </ul> <span class="textbox"><a href="contactus.php" class="navtext">Contact Us</a></span> <span class="textbox"><a href="links.php" class="navtext">Links</a></span> </td> </tr> </table> </div></div> Hi I use DIV to display image thumbnails in a row from php loop. for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left, here is my code till now, PHP Code: echo "<div style=' text-align: center; border: solid 1px #993333; padding: 1px; margin: 2px; float: left; margin-left: 6%; '>"; echo "<div style=' text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;'> <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a> </div></div>"; Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png Gah. Internet Explorer is doing mighty funky things with my webpage. http://www.maths.tcd.ie/~icecube The floating images in the main posts work fine from firefox, but in the IE that I checked them out on, there are just blank spaces where the images/comments/bored should be - but even then you can still right click on the space where the image should be to save it and stuff. Anyone have any help/suggestions? i'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on). i've got a page that basically follows this order: -header (h1) -4 main menu blocks (div-ul-li-a) -firefox plug (h3) -main content container (div) ----... (small bit of irrelevant content) ----google adsense block (p) ----entry container (div) -------entries (div-h4-ul-li) ----end entry container (/div) -end main content container (/div) -4 less-relevant menu blocks (div-ul-li-a) -footer (hr-p) if that's confusing to you, check out the source code he URL anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great. problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: URL -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks. problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right. basically, i want my xhtml 1.1 'working page' (URL) to look and act like my current page: URL ==stipulations== -i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- which is the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-) -i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element). ==source code== working xhtml (veiw source) - URL working css - URL current xhtml (veiw source) - URL current css - URL if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-) a HUGE thank-you to anybody willing to help me!! Hello, can anyone help me with this? I'm having trouble floating some divs and I can't find the problem. 1. navigation should be aligned with the bottom of the h1 logo 2. the content div should come next to the list of brands. The content div should overlap the black bg at the top. www. claeysconsult . be / misskado / index2.html Thanks in advance... |
|||||||