Forum Moderators: not2easy
My HTML code looks like:
<h1>This is the title of my article</h1>
<div id="sub_header">
<div id="updated">Last Updated: 1/13/2009</div>
<div class="article_options">
<ul>aricle options</ul>
</div>
</div>
The reason I am not using SPAN is because it will not validate because I have a list element inside. When I use DIV it validates but I can only get it to look right in IE. I've used float but with little success:
css:
div#sub_header {
width: 100%;
height: 20px;
padding: 5px 0 5px 0;
margin: 0;
border-bottom: 1px solid #dbdbdb;
}
div#updated {
float: left;
width: 40%;
line-height: 20px;
font-size: 12px;
font-style: italic;
min-width: 200px;
display: inline;
}
.article_options div {
float: right;
width: 56%;
line-height: 20px;
text-align: right;
font-size: 12px;
font-style: italic;
display: inline;
min-width: 200px;
}
Any help you could offer would be greatly appreciated.
Doctype = <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
.article_options div
becomes
.article_options
Here is what I am visually trying to do:
¦*******************************************************************¦
¦...................................................................¦
¦...................................................................¦
¦...................................................................¦
¦This is the article title!.........................................¦
¦-------------------------------------------------------------------¦
¦ Updated on: 1/15/09..........................Print..Email..Share..¦
¦-------------------------------------------------------------------¦
¦...................................................................¦
¦...................................................................¦
¦............................Article Body...........................¦
¦...................................................................¦
¦...................................................................¦
¦*******************************************************************¦
The width of the article is dynamic to fill the remaining part of the page. In the menu bar between the article title and body, I need that to also be dynamic (approximately 40% / 60%). There are two DIV'S - one contains the updated on information, the other contains article tools like email, print, and share.
The reason I am not able to use span is bcause the print, email, and share text / icons are put together using a ul li.
#header {width:100%;}
#headerleft {width:40%; float:left;}
#headerright {width:60%;float:left;}
#content {clear:both;}
<div id="header"><h1>This is the article title!</h1></div>
<div id="headerleft">Updated on: 1/15/09</div>
<div id="headerright">Print..Email..Share</div>
<div id="content">This is your main content</div>
If your problem is the list items position try this:
* {margin:0;padding:0;}
#header {width:100%;}
#headerleft {width:40%; float:left;}
#headerright {width:60%;float:left;}
#content {clear:both;}
ul {float:left;display:inline;}
li {float:left;width:4em;}
<div id="header"><h1>This is the article title!</h1></div>
<div id="headerleft">Updated on: 1/15/09</div>
<div id="headerright">
<ul>
<li>Print</li>
<li>Email</li>
<li>Share</li>
</ul>
</div>
<div id="content">This is your main content</div>
Does that fix the problem?
Again, here is my CSS:
DIV#PARENT {
width: 100%;
height: 20px;
padding: 5px 0 5px 0;
margin: 0;
border-bottom: 1px solid #dbdbdb;
}
DIV#LEFT {
float: left;
width: 40%;
line-height: 20px;
font-size: 12px;
font-style: italic;
min-width: 200px;
display: inline;
position: relative;
}
DIV#RIGHT {
float: left;
width: 56%;
line-height: 20px;
text-align: right;
font-size: 12px;
font-style: italic;
display: inline;
min-width: 200px;
position: relative;
}
Are you sure you're previewing it in a broswer and not in any software?
<snip>
[edited by: swa66 at 4:23 am (utc) on Jan. 17, 2009]
[edit reason] Please keep the discussions in the forum so all can enjoy it (post relevant code) [/edit]
I'll PM you the link for my test site. Thanks!
