|
CSS - Pointers On Css Alignment Please?
===
Edit: Awesome, after spending about a half an hour typing out this post, I can't get my link to my page, nor my images to load, unless I go spam five posts out really quickly. Being as this measure was obviously made to prevent spam, I don't think that would make me any friends. And with text descriptions only, it'll be really hard to explain my problem, since, you know, it's visual. And for my page to display correctly, I have to have a certain amount of text in my body section, that I'm sure no one wants to read, so I can't post my entire long html file, and even if I could, I'd have to tell people to make their own png images with the same names and sizes I used in order for them to see the problem. And trying to get around the URL filter by adding spaces and instructions would annoy people and probably get me banned anyway. I guess I'll have to ask somewhere else, there goes all my hard work. And to head off the flames, I did read the rules before posting, albeit briefly. Obviously I didn't do a good enough job, and by missing a paragraph or two, I got screwed. ======== Original post that won't help anyone see the problem, written back when I was in a better mood, about five minutes ago. I'm trying to build my own website, in HTML and CSS. I am running into some problems though, and I was wondering if anyone here could point me in the right direction. If there is a site somewhere that answers this question, and I missed it due to lack of searching, please post the link if you know it anyway, because I searched extensively, I simply may have used the wrong keywords. Just because you found it in a few seconds, please do not assume that I haven't searched myself. This is an archive (MediaFire) of my page, as well as a set of pictures (also included in this post) outlining what is wrong with the page. (Personal information replaced with Lorem Ipsum) All issues are alignment related, although I'm not sure what the root cause of them is. I had some issues earlier about missing semi-colons and such, but I fixed those, to the best of my knowledge. The first issue is that the title and link border I created to wrap around the top and left of my page are not lined up. There is a gap of about 5 pixels vertically, and the left border is about 3 pixels off to the left, compared to the top border. There are no line breaks, and although I can fix the issue with absolute distances, those break as soon as I resize my monitor. Percentages would not break on resize, but, they wouldn't fix the issue anyway, so that's a moot point. Here's a picture to show what I mean: The second issue is one of less importance, but no less annoying, and I would think, easier to solve. In order to have my text not come off of the background image on the right side, I had to pad the div by 30 pixels. This causes the text to be too far to the right on the left side. Last, I have a column issue. I created two divs inside a container div, and made a links column and a body column. Other than the text alignment problem above, they get along perfectly, until the end of the links column. At that point, the body column takes up the entire space there. This was right in the middle of a bulleted list in the original page, which made it look really ugly. But even if the list were to be moved somewhere else, it still would look bad. Is there any way to force the right column to be on the right side? I tried setting a width in the style, didn't affect it at all. I tried floating it to the right, while the links were floated to the left, but that made the background disappear and the text show up below everything else. Picture of original problem: Thank you very much to anyone who helps out. Similar TutorialsI am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks! Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
Hi, I have navigation links at the top of a blog in a header file, and cannot get them to align vertically for both firefox and IE. I've tried everything I can think of (using extra <br>, <p>, vertical-align: middle, changing margins, changing padding, etc) but cannot find a solution that aligns them vertically in both browsers. Any help is appreciated. Here is the code, which works in firefox: Code: <body> <!-- page header --> <div id="header" "border: 0px solid; margin:0 auto; "> <a href="http://www.website.com/blog/"><IMG SRC="http://www.website.com/images/logo.png" BORDER=0 width="435" height="92" ALT="logo" align="left"></a> </div> <div style="clear: both; margin:0 auto; "></div> <div style="background-image: url(http://www.website.com/images/sidebar_center2.jpg); border: #333333 2px solid; width: 900px; height: 60px; padding: 6px; margin: 0px auto; font-size: 17px; text-align: center; "> <p><font face="calibri,verdana" color="#ffffff"> <a href="http://www.website.com/"><font color="#ffffff">Home</font></a> | <a href="http://www.website.com/tips-1.html"><font color="#ffffff">ilnk 1</font></a> | <a href="http://www.website.com/tips-2.html"><font color="#ffffff">link 2</font></a> | <a href="http://www.website.com/tips-3.html"><font color="#ffffff">link 3</font></a> | <a href="http://www.website.com/tips-4.html"><font color="#ffffff">link 4</font></a> | </font></p> </div> <!-- begin wrapper divs --> <div id="content"> Hi-- I'm developing a 3-column site for a customer and was asked to make the first two columns align vertically to 385px. So the bottoms of all the text will be at 385px. The text is dynamic, so I have no way of knowing how tall the blocks will be. The first column will be one or more paragraphs of text and the second will be a bulleted list. Any help is greatly appreciated! :grimey For those of you using BETA IE7 you will not see this error, which makes me believe that it is just IE6 being retarded. But because there are very few out there viewing sites with IE7 I have a problem. becuase I cannot post the code, unless you want my entire stylesheet and all my source, because I literally have no idea what is causing this error, but I will post the code relating to it. http://www.unlimitedgamer.net/area51/ this is a beta page for the layout I am working on, if you scroll down you will see the news becomes gradually more and more distorted, the site is 100% valid, I just ran it through the w3.org validator. code relating to problem HTML Code: <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div class="maincol" > /////////////////////////ONE OF THE NEWS POST////////// <div class="entry"> <div class="entrydate"> <div class="entrymonth">February<br /> 2006</div> <div class="entrynumber">23</div> </div> <div class="entrytitle"> <h1 id="post-215">[<span class="comment_color">2</span>] <a href="http://www.unlimitedgamer.net/23/the-focus-on-black/" rel="bookmark" title="Permanent Link: The Focus on Black">The Focus on Black</a> - <i>Death God</i></h1> </div> <div class="entrybody"> <p>TEXT TEXT </p> <div class="news_footer"> <img src="http://www.unlimitedgamer.net/wp-content/themes/gespaa_v2/images/file.gif" title="file" alt="*" /> <a href="http://www.unlimitedgamer.net/category/xbox/" title="View all posts in Xbox" rel="category tag">Xbox</a>, <a href="http://www.unlimitedgamer.net/category/playstation-2/" title="View all posts in Playstation 2" rel="category tag">Playstation 2</a>, <a href="http://www.unlimitedgamer.net/category/black/" title="View all posts in BLACK" rel="category tag">BLACK</a> </div> </div> </div> /////////////////////////END OF THE NEWS POST////////// </div> </div> <div id="leftcol" > <div class="Box"> <h3>Welcome to Unlimited Gamer</h3> <p> TEXT TEXT</p> </div> </div> </div> I only posted one of the news post because the code doesn't change depending on the news post... now for the css of all those classes and ids CSS Code:
#wrapper
{
overflow: hidden;
}
#wrapper
{
float: middle;
float/**/: none;
}
#leftcol{
width:149px;
float:left;
position:relative;
font-size: 8pt;
color: #e16c72 'Lucida Grande',verdana,arial,sans-serif;
text-decoration: none;
}
#twocols{
width:630px;
float:right;
position:relative;
}
.maincol{
background-color: #FFFFFF;
float: left;
font-size: 8.5pt;
position: relative;
width:630px;
}
#maincol{
background-color: #FFFFFF;
float: left;
font-size: 9px;
position: relative;
width:630px;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
/***********************************************************************
* Entry *
***********************************************************************/
.entrybody p, form p, .commentbody p{
margin-top:0px;
margin-left: 0px;
padding-left:0px;
}
h1{
font-size: 24px;
color: #385abe;
}
h2.entrydate {
font-weight: normal;
font-size: 16px;
color: #888;
margin-bottom:3px;
padding-top: 3px;
}
entrytitle {
font-family: "Century Gothic", "Lucida Grande", arial, Tahoma, Verdana,helvetica, sans-serif;
margin:0px;
font-weight: normal;
font-size: 24px;
padding-top: 5px;
}
.entrybody{
color: #424d53;
font-size: 12px;
padding-bottom: 10px;
margin-bottom: 25px;
border-bottom: 1px dotted #6d6d6f;
padding-left:3px;
padding-top: 5px;
}
I think thats everything, but you really need to see it for yourself to understand the error, it doesn't occur in firefox though :/ thanks for any help. My page looks great, except in IE 6 where the green header shifts left instead of staying centered. I don't know why!!! It can be viewed at: http://www.descom.org/testing/home.html Roll over "About" and then click on any of its sublinks. The CSS sheets a http://www.descom.org/testing/allianceStyles.css and: http://www.descom.org/testing/ie6.css THANK YOU! how is it done? i use now absolute positioning in a relative block but if i understand this is taken out of the flow ? so if i use it for a link at the bottom and the user change his font size....things starts to overlap any ideas how this is not going to happen? Hello everyone. Another episode of stupid CSS tricks here! h-t-t-p://rewards.yarnell.openi.com/ This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode. I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this. I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look! Have a great day! I am currently working on a site with a content section and a menu to the right of it. Im using CSS to do this and it seems to work in firefox, but not IE. What I mean is that the menu that is suppose to be to the right is all the way at the bottom and it should be right next to the content section. Do I have my index.php right? Example: <div id="content"> </div> </div id="rightMenu"> </div> I tried using float: left; on the rightMenu section, but it doesnt seem to work. Any hacks to make this work in IE? OK, I somehow became a css n00b overnight (I've made 4-5 websites heavily using css.) Basically, here is what I want: Code: style :: [ ] [ ] And here is what I'm getting: Code: style :: [ ] [ ] For some reason the boxes won't align with the text. No matter what I do! Here is the link to see: http://www.sential.co.uk/test.php Here is the html: Code:
<div id="style_selector">
<p>style ::
<a href="#" onclick="setActiveStyleSheet('SE001');
return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
<a href="#" onclick="setActiveStyleSheet('SE002');
return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
</p>
</div>
And here is the css: Code:
#style_selector{
position: absolute;
top: 70px;
left: 160px;
height: 25px;
width: 100%;
text-align: left;
}
#style_se001{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #6187E1;
display: block;
border: 1px solid #ffffff;
}
#style_se001:hover{
border: 1px solid #6187E1;
}
#style_se002{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #FCB029;
display: block;
border: 1px solid #ffffff;
}
#style_se002:hover{
border: 1px solid #FCB029;
}
I'm sure it's something simple, yet I've tried switching positioning attributes and everything, and the code for aligning these boxes is IDENTICAL to the menu buttons at the top. I'm totally miffed -Luke I'm using this layout, modified quite a bit for visual design, but the "mechanics" are the same as the author's demo for the most part: http://matthewjamestaylor.com/blog/...rail-pixels.htm The top navigation is a horazontal list aligned to the left. What I would *like* to do is have all of the nav "tabs" aligned to the left as they are now, except the last one, aligned to the right. Sort of like this: TTTT_____T Any ideas? Hello all! I am trying to create a simple website. I had it working in html alignment wise here URL But i want it working in CSS. Look here URL and tell me what it is i have done wrong. I want the two colums to sit next to each other, centered. Thanks for your time. Hello everyone! I'm new here, but I'm not new to CSS! I've built a website out of HTML, CSS, and Java Script. I want to add some side boxes (navigation on sides) for quick navigation... But I am having a problem... See the example page cfpmedia DOT COM / 2.0 As you can see... There is a bunch of text encased within a border. The title is Side Bar. I need to know how to make it so the Side Bar is aligned with the Main border (the body). I want to do this... Example... ________ ________ |Side Bar| | Body | | | | | |_______| |_______| I would like to know how to make them both perfectly aligned. Here is my CSS Code... body {background-color:#B2CC7C} body {color:black} body {text-align:center} body {font-family: Comic Sans MS} h3 {font-size:50px} p.subject {font-size:20px} p.subject{text-align:left} p.body { border-style:solid; border-width:1px; border-color:#000000; background-color:#BED490; margin-top:0px; margin-bottom:50px; margin-right:85px; margin-left:85px; } p.navbar { border-style:solid; border-width:1px; background-color:#BED490; margin-top:0px; margin-bottom:50px; margin-right:200px; margin-left:200px; } p.module { border-style:solid; border-width:1px; border-color:#000000; background-color:#BED490; margin-top:0px; margin-bottom:50px; margin-right:85%; margin-left:-45px; } The P.Module is the one that controls the side bar, and the P.Body controls the body. Hi Guys, I'm trying to create a simple search form. It will be a set of horizontal links seperated by pipes '|' with a simple form field search box below the set of links. I've it pretty much laid out how I want, but the links above the search box are not alinging with the search box correctly. I want the links pushed up against the text box. Here is a pic showing how I want it to look. The first search box is how my code display now. The second box is what I am trying to achieve. http://i617.photobucket.com/albums/...aderexample.jpg Here is the code I have. I'm hoping to create a div that will wrap around this code and contain it well. I have a div defined in the code, but it doesn't have any attributes. Any advice on how to change this to get it to display how I want? Please note, the span/class attributes found in the code relate to a style sheet I have defined elsewhere. However, it doesn't affect the alignment so I didn't include the stylesheet. There is no other CSS defined yet. My guess is I need to define a class for the DIV and parameterize that class to smash the two elements (links and search box) together. Code: <div> <a href="http://www.company.com" class="active" title="Cars for Sale"> <span class="headersearchlink">Vehicles</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" class="active" title="Aircraft"> <span class="headersearchlink">Aircraft</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Homes for Sale or Rent"> <span class="headersearchlink">Homes</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Apartments"> <span class="headersearchlink">Apartments</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Jobs & Resumes"> <span class="headersearchlink">Jobs</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Pets for Sale"> <span class="headersearchlink">Pets</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Items for Sale"> <span class="headersearchlink">Items for Sale</span></a><br> <form method="post" action="" name="search-form"> <INPUT class="headersearchinput" type="Text" name="postal" size="85"> <INPUT class="headersearchinput" type="submit" name="search" value="search"> </form> </div> Almost got my layout sorted, however i am having a really anoying alignment issue in Ie6, firefox works fine. The right-content div is off by 3px, i cant work out why. I am having to use two divs as opacity is inherited by child content in each div - i get round this by overlaying a 'content div' with absolute positioning. Page can be seen he www.monsterserve.net/new.htm and code is below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#container
{
position:relative;
width: 900px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10px; /* offset 10px from page top */
text-align:left;
border: 1px solid black;
/*background-image: url('car.jpg');
background-repeat: no-repeat;
background-position:bottom right;*/
}
#left
{
width:500px;
float: left;
border-right: 1px solid black;
height: 500px;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#right
{
margin-left:600px;
width:200px;
height:500px;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#left-content
{
position:absolute;
width: 500px;
left:0px;
top:0px;
}
#right-content
{
left: 603px;
\left: 602px;
l\eft: 603px;
position:absolute;
background-color:#0066CC;
position:absolute;
width:200px;
top:0px;
border: 1px solid black;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="left-content"></div>
<div id="right-content">right content</div>
</div>
</body>
</html>
Thanks in advance, PS> note that i have tried doing that \ thing for positioning (i saw someone doing that for width so i thought it may work for positioning too ) |
|||||||