Align two divs to the right of one - css

I'm making a website for someone and I'm kind of rusty with my html/css, and I really need side navigation on this site.
I have the sidebar (#menu), then I want two divs (#slider on top of #container) to the left of #menu.
How can I do this? Code is below, you also might want to know that #slider is a photo slider I got online:
<style type="text/css">
body {font-family: Arial; background-color: #eeeeee; background-image: url(Images/bg.png); background-position: bottom; background-repeat: repeat-x; height: 100%; background-attachment: fixed; color: #333333;}
div#menu {float:left;margin-left: 25%; margin-right:25%; font-size: 40px; padding-top: 10px; padding-bottom: 10px; width: 10%; border: 1px solid #cccccc; text-align: center; word-spacing: 15px; background-color: #ffffff; margin-top: 10px;}
div#container {padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; margin-left: 25%; margin-right: 25%; width: 40%; border: 1px solid #cccccc; text-align: left; background-color: #ffffff; margin-top: 10px;}
a {color: #666666; text-decoration:none;}
a:hover {color: #333333; text-decoration: underline;}
ul, li {list-style-type: none;}
#slider {width:600px;height:300px; margin-left: 25%; margin-right: 25%; margin-top: 10px;}
div.navBulletsWrapper {display:none;}
</style>
</head>
<body>
<div id="menu">
<li>Home</li>
<Br>
<li>About</li>
<br>
<li>Products</li>
<Br>
<li>News</li>
<br>
<li>Contact</div></li>
<div id="slider">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
<div id="container">
Placeholder text.
</div>


Let's forget your non validating html for a while, though there is much to say about it.
Your main issue is a lack of structure, you'll find it easier to align your slider and container if they are inside a common div. Your code should look like this (schematically):
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div id="main">
<div id="slider">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
<div id="container">
Placeholder text.
</div>
</div>
That way, you can float #menu and #main as you wish (right or left).
On to other issues in your code, always wrap li inside a ul or ol, and never use br to make vertical space, prefer using margin or padding. Html is for document structure only, CSS takes care of the visualization part.


First clean up your HTML. Run it through the W3C validator if you're not sure what to fix. http://validator.w3.org/#validate_by_input
Do you want slider and container inside of menu? If so, you've closed your first div too soon. Also I'm not sure your margins as percentages will give you the desired feel you're going for.
Please be a little more specific with your question and fix up your markup.

Related

making entire div clickable with a link

Let me just say before I ask this question ..I did try searching for a long time through existing topics but I can't find a working solution to my problem.
I am using Bootstrap and have a horizontal list of items with icons and a text link underneath. What I want is basically the entire div clickable as the link, not just the actual text.
Here is the HTML:
<ul class="glyphs character-mapping">
<li>
<div data-icon="a" class="icon"></div>
Link 1
</li>
<li>
<div data-icon="b" class="icon"></div>
Link 2
</li>
</ul>
And the CSS:
.glyphs.character-mapping {
margin: 0px;
padding: 0px;
color: #000000;
}
.glyphs.character-mapping li {
margin: 0px 10px 30px;
display: inline-block;
width: 165px;
text-align: center;
}
.glyphs.character-mapping .icon {
margin: 10px 0px 10px 45px;
padding: 0px;
position: relative;
width: 70px;
height: 70px;
color: #FF0000;
overflow: hidden;
border-radius: 3px;
font-size: 68px;
}
I tried several solutions that are related on here, including giving no padding or margin to the 'li' and instead making the 'a' 100% wide and high, but that didn't work either.
Any ideas what I'm doing wrong here?
Thank you so much in advance for any help.

Can't you just do this:
<ul class="glyphs character-mapping">
<li>
<a href="">
<div data-icon="a" class="icon"></div>
Link 1
</a>
</li>
<li>
<a href="">
<div data-icon="b" class="icon"></div>
Link 2
</a>
</li>
</ul>
Where the entire div and text is clickable?

How to align the below code

How to get the menu bar right below the Dial food caption and remove the underline shown in the below code:
<body>
<div id="header">
<h1 style="color: #CC6600; height: 100px; width: auto;">
Dial food</h1>
</div>
<div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
word-spacing: 24px; position:absolute">
About
Restaurants
Contact
Support
</div>
</body>
can you please help me in getting this alignment and link text only get aligned?

Change the <h1> height to 15px to bring the menu bar up. (or a value to your liking)
<h1 style="color: #CC6600; height: 15px; width: auto;">
And use the following CSS to remove the underline.
#Menu a {
text-decoration:none;
}
http://jsfiddle.net/6bxVr/

HTML
Dial food
<ul>
<li> About </li>
<li>Restaurants </li>
<li>Contact </li>
<li>Support </li>
</ul>
CSS
.header
{
color: #CC6600;
height:20px;
width: auto;
margin:10px;
}
ul
{
list-style:none;
}
ul li
{
float:left;
padding:10px;
background-color: #330000;
word-spacing: 24px;
font-size: 20px;
height: 25px;
width:auto;
}
li a
{
text-decoration:none;
}
Fiddle Demo Here
Update fiddle of Yours
Hope this helps
happy coding..!!

Link text still underlined when "text-decoration: none" is applied

I am working on a page in Drupal 7 in which I have a number of boxes with text and a photo inside of them. I have the entire box div linking to its content page, but I can't seem to get rid of the underline.
I have tried applying text-decoration: none; to every class inside of and outside of the box and the text inside the box is still underlined.
Even when I use developer tools/'inspect element' tool in Google it shows that the computed style for the box and the text within is text-decoration: none;
I have been trying to figure this out off and on for about a day now and I have not been able to find any solutions via Google.
Any ideas?
Thanks in advance.
Edit: I am working to post my code. I am trying to find a good solution for posting because it is a page within Drupal that is rendering through Views. Also, I have a job interview in an hour that I'm getting ready for. I probably should have waited until after the interview to post this issue.. oh well.
Edit x2: My HTML is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" class="js"><head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
<title>Portfolio Page | mywebsite.com</title>
<style type="text/css" media="all">#import url("http://url.com/modules/system/system.base.css?m178g6");
#import url("http://url.com/modules/system/system.menus.css?m178g6");
#import url("http://url.com/modules/system/system.messages.css?m178g6");
#import url("http://url.com/modules/system/system.theme.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/misc/ui/jquery.ui.core.css?m178g6");
#import url("http://url.com/misc/ui/jquery.ui.theme.css?m178g6");
#import url("http://url.com/modules/overlay/overlay-parent.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/modules/comment/comment.css?m178g6");
#import url("http://url.com/modules/field/theme/field.css?m178g6");
#import url("http://url.com/modules/node/node.css?m178g6");
#import url("http://url.com/modules/search/search.css?m178g6");
#import url("http://url.com/modules/user/user.css?m178g6");
#import url("http://url.com/sites/all/modules/views/css/views.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/sites/all/modules/ctools/css/ctools.css?m178g6");
#import url("http://url.com/sites/all/modules/lightbox2/css/lightbox.css?m178g6");
#import url("http://url.com/sites/all/modules/views_slideshow/views_slideshow.css?m178g6");
#import url("http://url.com/modules/shortcut/shortcut.css?m178g6");
#import url("http://url.com/modules/toolbar/toolbar.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/sites/all/themes/personal/css/style.css?m178g6");</style>
<style type="text/css" media="print">#import url("http://url.com/sites/all/themes/personal/css/print.css?m178g6");</style>
<style type="text/css" media="mobile">#import url("http://url.com/sites/all/themes/personal/css/mobile.css?m178g6");</style>
<script type="text/javascript" src="http://url.com/misc/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://url.com/misc/drupal.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/ui/jquery.ui.core.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views/js/views-contextual.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.ba-bbq.js?v=1.2.1"></script>
<script type="text/javascript" src="http://url.com/modules/overlay/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.cookie.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/lightbox2/js/lightbox.js?1332273397"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views_slideshow/js/views_slideshow.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/modules/toolbar/toolbar.js?m178g6"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"personal","theme_token":"0CkOwyp1neNP-2IbE8LYCgYGBJ9sz39ORy5DodizAGg","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"sites\/all\/modules\/views\/js\/views-contextual.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"misc\/jquery.cookie.js":1,"sites\/all\/modules\/lightbox2\/js\/lightbox.js":1,"sites\/all\/modules\/views_slideshow\/js\/views_slideshow.js":1,"modules\/toolbar\/toolbar.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/lightbox2\/css\/lightbox.css":1,"sites\/all\/modules\/views_slideshow\/views_slideshow.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/personal\/css\/style.css":1,"sites\/all\/themes\/personal\/css\/print.css":1,"sites\/all\/themes\/personal\/css\/mobile.css":1}},"lightbox2":{"rtl":0,"file_path":"\/(\\w\\w\/)public:\/","default_image":"\/sites\/all\/modules\/lightbox2\/images\/brokenimage.jpg","border_size":10,"font_color":"000","box_color":"fff","top_position":"","overlay_opacity":"0.8","overlay_color":"000","disable_close_click":true,"resize_sequence":0,"resize_speed":400,"fade_in_speed":400,"slide_down_speed":600,"use_alt_layout":false,"disable_resize":false,"disable_zoom":false,"force_show_nav":false,"show_caption":true,"loop_items":false,"node_link_text":"View Image Details","node_link_target":false,"image_count":"Image !current of !total","video_count":"Video !current of !total","page_count":"Page !current of !total","lite_press_x_close":"press \u003Ca href=\u0022#\u0022 onclick=\u0022hideLightbox(); return FALSE;\u0022\u003E\u003Ckbd\u003Ex\u003C\/kbd\u003E\u003C\/a\u003E to close","download_link_text":"Download Original","enable_login":false,"enable_contact":false,"keys_close":"c x 27","keys_previous":"p 37","keys_next":"n 39","keys_zoom":"z","keys_play_pause":"32","display_image_size":"","image_node_sizes":"()","trigger_lightbox_classes":"","trigger_lightbox_group_classes":"","trigger_slideshow_classes":"","trigger_lightframe_classes":"","trigger_lightframe_group_classes":"","custom_class_handler":0,"custom_trigger_classes":"","disable_for_gallery_lists":true,"disable_for_acidfree_gallery_lists":true,"enable_acidfree_videos":true,"slideshow_interval":5000,"slideshow_automatic_start":true,"slideshow_automatic_exit":true,"show_play_pause":true,"pause_on_next_click":false,"pause_on_previous_click":true,"loop_slides":false,"iframe_width":600,"iframe_height":400,"iframe_border":1,"enable_video":false},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height"});
//--><!]]>
</script>
</head>
<body class="html not-front logged-in no-sidebars page-portfolio toolbar toolbar-drawer lightbox-processed" style="padding-top: 65px; ">
<div id="skip-link">
Skip to main content
</div>
<div id="overlay-disable-message" class="clearfix"><h3 class="element-invisible">Options for the administrative overlay</h3>If you have problems accessing administrative pages on this site, disable the overlay on your profile page. Dismiss this message.</div><div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
<div class="toolbar-menu clearfix">
<ul id="toolbar-home"><li class="home first last"><span class="home-link">Home</span></li>
</ul> <ul id="toolbar-user"><li class="account first">Hello <strong>user</strong></li>
<li class="logout last">Log out</li>
</ul> <h2 class="element-invisible">Administrative toolbar</h2><ul id="toolbar-menu"><li class="menu-11 path-admin-dashboard first"><span class="icon"></span>Dashboard <span class="element-invisible">(View and customize your dashboard.)</span></li>
<li class="menu-9 path-admin-content"><span class="icon"></span>Content <span class="element-invisible">(Administer content and comments.)</span></li>
<li class="menu-21 path-admin-structure"><span class="icon"></span>Structure <span class="element-invisible">(Administer blocks, content types, menus, etc.)</span></li>
<li class="menu-7 path-admin-appearance"><span class="icon"></span>Appearance <span class="element-invisible">(Select and configure your themes.)</span></li>
<li class="menu-18 path-admin-people"><span class="icon"></span>People <span class="element-invisible">(Manage user accounts, roles, and permissions.)</span></li>
<li class="menu-16 path-admin-modules"><span class="icon"></span>Modules <span class="element-invisible">(Extend site functionality.)</span></li>
<li class="menu-8 path-admin-config"><span class="icon"></span>Configuration <span class="element-invisible">(Administer settings.)</span></li>
<li class="menu-19 path-admin-reports"><span class="icon"></span>Reports <span class="element-invisible">(View reports, updates, and errors.)</span></li>
<li class="menu-12 path-admin-help last"><span class="icon"></span>Help <span class="element-invisible">(Reference for usage, configuration, and modules.)</span></li>
</ul> Hide shortcuts </div>
<div class="toolbar-drawer clearfix">
<div class="toolbar-shortcuts"><ul class="menu"><li class="first leaf">Add content</li>
<li class="leaf">Find content</li>
<li class="leaf">Performance</li>
<li class="last leaf">Maintenance mode</li>
</ul></div>Edit shortcuts </div>
</div>
<!-- If front page, present front page content -->
<div id="a">
<!-- Begin other page specific content -->
<div id="smallhead">
</div>
</div><!-- End div a-->
<!-- Begin menu -->
<div id="b">
<div id="menu">
<div class="item">Home</div>
<div class="item">About Me</div>
<div class="item">Portfolio</div>
<div class="item">Photos</div>
<div class="item">Projects</div>
<div class="item">Blog</div>
</div>
</div>
<div id="c">
<div id="middle">
<!-- Begin other page specific content -->
<div id="contentwrapper">
<div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<div class="view view-portfolio-page view-id-portfolio_page view-display-id-page view-dom-id-a0c892fe2818834f0a7750c98e7e6688">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div> <div><a href="/node/10">
<div class="smallbox">
<div class="nounderline">
<strong>Postcards</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Postcards<br>
Adobe Illustrator
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-2 views-row-even">
<div> <div><a href="/node/9">
<div class="smallbox">
<div class="nounderline">
<strong>Design</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Desiugn<br>
Adobe Illustrator
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-3 views-row-odd">
<div> <div><a href="/node/8">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt="screenshot"><br>
Awareness Campaign<br>
HTML, CSS
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-4 views-row-even views-row-last">
<div> <div><a href="/node/7">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Details Website<br>
HTML 5, CSS 3
</div>
</div></a></div> </div> </div>
</div>
</div> </div>
</div>
</div>
</div>
<!-- End other page specific content -->
</div><!--end middle-->
</div>
<div id="d">
<div id="footer">
;Contact Form
<br>
Copyright ©2012 My Name
</div>
</div>
<div id="lightbox2-overlay" style="display: none; "></div> <div id="lightbox" style="display: none;" class="lightbox2-orig-layout"> <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><div id="modalContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="frameContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="imageContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><img id="lightboxImage" alt=""><div id="hoverNav"><a id="prevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="nextLink" title="Next" href="#" style="padding-top: 10px; "></a></div></div><div id="loading"></div></div> <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "> <div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><div id="frameHoverNav"><a id="framePrevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="frameNextLink" title="Next" href="#" style="padding-top: 10px; "></a></div><a id="bottomNavClose" title="Close" href="#" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "></a><a id="bottomNavZoom" href="#"></a><a id="bottomNavZoomOut" href="#"></a><a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a><a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a></div></div> </div> </div></body></html>
And my CSS is as follows:
#charset "utf-8";
/* CSS Document */
body{
background: black;
font-size: 14px;
margin: 0;
}
a:visited{
color: blue;
}
h2{
font-size: 135%;
margin: .2em 0;
}
#a{
width: 100%;
background: rgb(140,79,84);
}
#bighead{
height: 31em;
width: 69em;
margin: 0 auto;
padding-top: 2em;
background: url(../img/headerpic.jpg);
text-align: center;
border: 0 solid black;
border-width: 0 4px;
}
#header a{
font-size: 35px;
text-decoration: none;
color: black;
}
#slogan{
font-size: 18px;
padding: .5em;
}
#smallhead{
height: 14em;
width: 69em;
margin: 0 auto;
background: url(../img/smallheader.jpg);
text-align: center;
border: 0 solid black;
border-width: 0 4px;
}
#b{
width: 100%;
background: rgb(50,51,46);
}
#menu{
width: 69em;
height: 2.5em;
border: 0 solid black;
border-width: 0 4px;
background: black;
text-align: center;
margin: 0 auto;
}
.item{
font-size: 17.5px;
height: 1.1em;
width: 9.2em;
float: left;
padding: .3em 0;
border-top: .2em solid rgb(31,38,28);
border-bottom: .2em solid rgb(31,38,28);
}
#menu a:link, a:visited{
text-decoration: none;
color: #CCC;
}
#menu a:hover{
color: white;
background: white;
text-decoration: underline;
}
#c{
width: 100%;
background: rgb(139,124,108);
}
#middle{
min-height: 22.5em;
width: 67.6em;
margin: 0 auto;
border: 0 solid black;
border-width: 0 4px;
background: rgb(98,103,109);
padding: .75em;
text-decoration: none;
}
.title{
font-size: 2em;
height: .5em;
width: 24em;
padding-left: 1em;
padding-bottom: .25em;
color: white;
}
.box{
float: left;
height: 17em;
width: 17em;
padding: 1em;
padding-top: .5em;
margin: 1.5em;
background: rgb(49,49,51);
color: white;
}
#contentwrapper{
}
#d{
width: 100%;
background: black;
}
#footer{
height: 2.5em;
width: 69em;
margin: 0 auto;
background: black;
text-align: center;
color: white;
}
.smallbox{
float: left;
height: 15em;
width: 17em;
padding: 1em;
padding-top: .5em;
margin: 1.5em;
background: rgb(49,49,51);
color: white;
text-align: center;
text-decoration: none;
}
.smallbox img{
padding: .2em 0;
}
.nounderline{
text-decoration: none;
}

Since this was the first google result and didn't solve my issue: Check the anchor states, as it might need to be set in one of the others. (https://www.w3schools.com/css/css_pseudo_classes.asp)
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}

To apply just to this view add:
.view-portfolio-page .views-row a { text-decoration: none; }
To apply to all views add:
.views-row a { text-decoration: none; }
http://jsfiddle.net/D8kRE/
You were applying text-decoration: none to a div which has no effect. You can only apply that to an anchor tag which in your case is located at .views-row a. You can get more specific and apply this to only the portfolio page view by using the code I've put above.

If you are refering to the underline on the text, remember to set the text-decoration property to none on the ELEMENT. E.g.
<html>
<head></head>
<body>
<div>
Google
</div>
</body>
Edit: Note, it is bad to use styling in-line with elements, I used it, just to demonstrate a solution.

Instead of font-decoration: none; try the css text-decoration: none;

As this hasn't actually got a definitive answer yet and it's fairly high up on Google searches. I thought I would chip in with my answer.
I just had a similar problem where I couldn't pinpoint why I wasn't able to get rid of the underline and found out that it was because I didn't specify the hover state.
So try out
#header a:hover {
text-decoration: none;
}
And that should work. I know this was posted ages ago, but I have seen that you haven't accepted an answer and didn't post whether you sorted it or not. So hopefully my input will help someone along the way and hopefully you can see this and finally accept an answer or make your own.

I know this is old, but this came upon my search as well. So I thought I'd share.
I had a similar problem. I created a regular nav and setting the text-decoration to none worked fine.
Then I had to amend my css to create a hamburger menu effect for smaller viewports. And although I used the exact same css, the underline appeared and nothing I did would make it go away. I know it has something to do with the toggle:checked & ~.mainNav feature under which my nav needed to be placed, but I couldn't figure out why and how to get around it.
In any case, the one thing that DID work was going into my reset, and adding a default: a {text-decoration: none}
Don't know why it worked, but it did. Hope this helps someone.

I ran into this problem and found it was "box-shadow." See if you are lucky enough with these styles:
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;

This doesn't appear to be a text-decoration: issue. It actually appears to be an issue with border-bottom:
Please check the instance of border-bottom in:
.item{
font-size: 17.5px;
height: 1.1em;
width: 9.2em;
float: left;
padding: .3em 0;
border-top: .2em solid rgb(31,38,28);
border-bottom: .2em solid rgb(31,38,28);
}

try to add !important
text-decoration: none !important;

text-decoration works on anchor, it's correct name would be: anchor-decoration-for-text.

Multiple Divs / Classes On an Opaque Background

My goal (and the question of how-to) is to have an opaque / white background with black fields over the opaque area to serve as content holders. Here is what I have now:
/* translucent background*/
.background
{
width:950px;
height:1024px;
margin: 9px auto 10px;
background-color:#ffffff;
opacity:0.35;
filter:alpha(opacity=35); /* For IE8 and earlier */
border-radius: 15px;
-moz-border-radius: 15px;
z-index:0;
}
/*content wrapper*/
.content
{
font-family: Arial;
font-size: 11px;
width:950px;
height:1024px;
margin: 9px auto 10px;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:1;
}
/*one of three content fields*/
.anounce_bar
{
font-family: Arial;
font-size: 16px;
width:940px;
height:225px;
float: left;
border: 5px 5px 5px 5px;
background-color: black;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:2;
}
<div class="background"></div>
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar">
</div>
<!--Left side nav bar-->
<div class="nav" style="height: 1024px; ">
</div>
<!--Right side content window-->
<div class="content_window">
</div>
</div>
Right now its showing the anounce_bar below the translucent background.. how do I get the bar (and subsequent nav & content_window) to go on top of .background?
Note: I have other content, including a top 'masthead' image and a background JPG that might be screwing with this.
Any help would be GREATLY appreciated.
Update:
This was an issue with opacity inheritance - the work around I used is described very well here
'background' class became #background without any opacity, and a new item was added:#background .transparency with absolute positioning and opacity.
<div id="background">
<div class='transparency'></div>
/*OTHER STUFF*/
</div>

Change the order
<div class="anounce_bar"></div>
<div class="background"></div>
That should work.

<div class="background">
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar" style="color: white">Anounce Bar</div>
<!--Left side nav bar-->
<div class="nav" style="height: 24px; width: 940px; background-color: green; float:left;">Nav</div>
<!--Right side content window-->
<div class="content_window" style="height: 24px; width: 940px; background-color: yellow; float:left;">Content Window</div>
</div>
</div>
Sample Code

css border problem

How do i put a border on a div in css that doesn't have a set height?
Want to achieve this without using any javascript. Code is below.
HTML
<div id="main_container">
<div id="header">
<div id="topMenu">
<ul id="topNav">
<li>Home</li><li>Contact</li><li>Links</li>
</ul>
</div>
<div id="mainMenu">
<ul id="mainNav">
<li >Home</li><li >About Us</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li><li >Multimedia</li>
</ul>
</div>
</div>
</div>
css
body{
text-align:center;
min-width:70%;
}
#main_container{
position:relative;
width:980px;
margin:auto;
text-align:center;
background-color:#FFFFFF;
border-color: #999999;
border-style: solid ;
border-width: 1px ;
margin-bottom: 20px;
}
#header{
position: relative;
width: 980px;
}
#mainMenu{
float:left;
width: 980px;
top: 50px;
background-color: #0099FF;
height: 30px;
}
#mainNav{
text-align: left;
}
ul#mainNav li{
display: inline;
margin: 0px 20px 0px 0px;
}
#topMenu{
width: 150px;
top: 10px;
text-align: right;
float:right;
margin-bottom: 20px;
}
ul#topNav li{
display: inline;
margin: 0px 10px 0px 0px;
}
#footer{}
Thanks in advance.

Does it work?
<div style="border:1px solid #000">
Your content here
</div>

It doesn't matter if there is no height attribute. Just use the border property as you normally would.
Edit: since you mention you have other divs inside your container div, I suspect you might need to use a clear. If you're still having issues with either the background or border not extending the length of the container, try adding this right before the closing div of the container:
<div style="clear:both"></div>

Just give the div some padding or content inside.
div {
border: solid 1px #000;
padding: 10px;
}

Resources