Inside a div I want a full width background color and center the content inside. I have read in some other posts that it needs an outer div to set the background-color there, and then an inner div with the width of my content and margin:0 auto;. I tried that but it doesn't work. I tried floating my content left and this didn't work either.
Here is my code. The problem is in the div class="themeDesign" where i put the background color. In the div class="themeDesignicons" when i put width:1000px the one of the li elements extends onto the next line, but with width:1300px they appear on the same line without centering. Why? Does it matter first-child? I cant go on. Thanks in advance
*{
margin:0px;
padding:0px;
}
body{
width:100%;
}
header{
background-color:#088da5;
overflow:hidden;
padding:15px 0;
}
.main-header{
width:1300px;
margin:0 auto;
}
.main-header .left-mainheader{
float:left;
margin-right:400px;
}
.main-header .left-mainheader ul li{
display:inline-block;
margin-right:26px;
}
.main-header .left-mainheader li a{
text-decoration:none;
color:white;
}
.main-header .right-mainheader{
float:left;
}
.main-header .right-mainheader ul li{
display:inline-block;
margin-right:15px;
}
.main-header .right-mainheader ul li a{
text-decoration:none;
color:white;
}
.left-mainheader img{
padding-right:8px;
}
header .header h1{
background-image:url(images/logoheader.png);
width:440px;
height:84px;
margin:60px auto;
overflow:hidden;
clear:both;
}
.header ul{
margin:25px auto;
width:440px;
}
.header li {
display:inline-block;
margin:0 15px 0 0;
}
.header li a{
color:black;
text-decoration:none;
font-size:15px;
font-family: tahoma;
}
header li a:hover{
text-decoration:underline;
}
.header .headermesa{
border-top:1px solid #666633;
}
.slider{
background-color:#f7f8fa;
}
.slidermesa{
margin:0 auto;
width:1200px;
height:421px;
}
.slide img{
border-top:1px solid #666633;
width:1200px;
height:421px;
}
.themeDesign{
background-color:#f7f8fa;
}
.themedesignheadings{
margin:0 auto;
width:1000px;
padding:35px 0;
border-bottom:1px dashed #877676;
}
.themeDesignicons{
width:1000px;
margin:0 auto;
}
.themeDesignicons ul li{
display:inline-block;
width:250px;
}
<!DOCTYPE html>
<html>
<head>
<title>-Tutorial for psd-revenant</title>
<meta charset="utf-8">
</head>
<body>
<header>
<div class="main-header">
<div class="left-mainheader">
<ul>
<li>
<img src="images/phoneIcon-header.png"/> +565 975 658
</li>
<li>
<img src="images/emailheader3.png"/>info#premiumcoding.com
</li>
<li>
<img src="images/timeheader2_03.png"/>Monday-Friday : 8.00-20.00
</li>
</ul>
</div>
<div class="right-mainheader">
<ul>
<li>Latest News</li>
<li>Login</li>
<li>Register</li>
<li>About Us</li>
</div>
</div>
<div class="header">
<h1></h1>
<div class="headermesa">
<ul>
<li>Home</li>
<li>Apparel</li>
<li>Fashion</li>
<li>News</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</header>
<div class="slider">
<div class="slidermesa">
<div class="slide">
<img src="images/mainslide.png"/>
</div>
</div>
</div>
<div class="themeDesign">
<div class="themedesignheadings">
<h2>Check our latest Wordpress Theme which implements a Page Builder and a Revolution Slider</h2>
<p>Learn how to build Wordpress Themes with ease with a premium Page Builder which allows you to add new Pages in seconds!</p>
</div>
<div class="themeDesignicons">
<ul>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png"/>
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png">
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png">
</div>
</li>
<li>
<div class="disc-cam">
<div class="icon cam2"></div>
</div>
<div class="disc-text">
<h3>Responsive Design</h3>
<p>Lorem ipsum dolor sit amet, co
ctetuer adipiscing elit, sed di
nonummy nibh euismod te.</p>
Read More<img src="images/arrow.png">
</div>
</li>
</ul>
</div>
</div>
Try this
.themeDesignicons {
width: auto;
margin: 0 auto;
text-align: center;
}
Related
Why is the background image in showCase[after header] not appearing. As, the image is in the same directory as I mentioned in the css url(''). I've done each and everything I can do. But, I think there is something wrong in my css code before showCase class.
How I can show background image in showCase class[after header].
/* Global Things */
body{
padding:0;
margin:0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5em;
}
.container{
width : 80%;
margin : auto;
overflow:hidden;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
/* Header */
header{
background-color: darkorange;
padding : 5px;
margin : 0px;
}
header .logoDesign{
font-size:20px;
float:left;
}
header ul li {
float: left;
display:inline-block;
margin: 0 20px 0 20px;
}
header ul a {
text-decoration: none;
font-size:16px;
color:white;
display: inline-block;
}
header ul a:hover {
text-decoration:underline;
font-size:18px;
font-weight: bold;
color:red;
padding:5px;
transition: .5s;
}
header nav{
float:right;
padding-top: 30px;
}
header .logoDesign .lighter{
color: #FFDF00;
}
/* ShowCase Design*/
.showCase{
text-align: center;
padding-top: 50px;
padding-right: 170px;
padding-bottom:30px;
padding-left:170px;
background: url('./images/showcase.jpg') no-repeat;
min-height:150px;
line-height: 1.5em;
}
.showCase h1{
line-height:1em;
text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Welcome | Faizan Corporation </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- For Logo and links.-->
<header>
<div class = "container">
<div class = "logoDesign" >
<h1> <span class = "lighter">Faizan</span> Industries </h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<!-- Let's Try to design Showcase. -->
<section class = "showCase" >
<h1>Affordable Professional Websites</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque est vel vulputate interdum. Nulla vel ante sit amet tortor dignissim fermentum a vel nunc.</p>
</section>
<!-- Now Newsletter Section. -->
<div class = "container">
<div class = "subButton">
<form action="nothing.php">
<p>Subscribe to our Newsletter</p>
<input type="email" placeholder="Enter You Email">
<button action = "submit" > Submit </button>
</form>
</div>
</div>
<!--small Section.-->
<div class = "container">
<section class = "portfolio" >
<ul>
<li> <img src="images/logo_brush.png" alt="Graphic Design">
<h2>Graphics Designing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
<li> <img src="images/logo_html.png" alt="Graphic Design">
<h2>HTML 5 Markup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
<li> <img src="images/logo_css.png" alt="Graphic Design">
<h2>CSS and CSS 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</li>
</ul>
</section>
<footer>
<p>Faizan Industries, Copyright © 2019 </p>
</footer>
</div>
</body>
</html>
I've tried this in jsFiddle
Background is applied. The issue likely is that your image url is incorrect.
Open Network tab in chrome, then load the page. You will likely see that url failing to load.
If you replace it with a placeholder.com url, such as https://via.placeholder.com/150 you can see the placeholder image being loaded.
I'm trying to keep a couple of lists aligned to the left with some text and un-wrapping around an image on desktop/tablet and mobile but don't seem to be making a lot of progress.
Here's the Codepen: http://codepen.io/carlos_serrano/pen/ikjeg
and here the code for what I have so far:
HTML:
<div class="content">
<img src="any 100x 100 image.gif">
<h3>Heading</h3>
<p>Just random text here.</p>
</div>
<div class="linkcontainer">
<div class="linkleft">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
</ul>
</div>
<div class="linkright">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</ul>
</div>
Here's the CSS:
p{
overflow: hidden;
}
img{
float:left;
margin: 0 25px;
}
.linkcontainer {
width: 50%;
padding-bottom: 25px;
clear: both;
}
.linkleft, .linkright {
width: 100%;
float: right;
}
#media only screen and (min-width: 481px) {
.linkleft, .linkright {
display: inline-block;
width: 30%;
float: left;
}
}
Ok, if I understood your question (and clarification in your comment) correctly, this is what you need to do:
First, move the heading and the text into the linkcontainer:
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif" />
</div>
<div class="linkcontainer">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
<div class="linkleft">
<!-- ... -->
</div>
</div>
Then ensure content and linkcontainer are both floated left:
.content {
float:left;
margin:0 25px
}
.linkcontainer {
float:left;
padding-bottom: 25px;
}
I updated your pen: http://codepen.io/anon/pen/aAiqj
EDIT: Upon further clarification, there is a better solution that will help prevent wrapping the heading, text and menus on smaller screens: make sure you wrap the 2 main divs into a wrapper div and set the width of this one to the total of the inner divs (plus margins).
#wrapper {
width: 750px
}
.content {
float: left;
margin: 0 25px;
width: 200px;
}
.linkcontainer {
float: left;
padding-bottom: 25px;
width: 500px;
}
<div id="wrapper">
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
</div>
<div class="linkcontainer">
<!-- ... -->
</div>
</div>
Here is your newest pen: http://codepen.io/anon/pen/hJbmr
Here is code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/notes.png" alt="img"></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li>COLUMN</li>
<li>TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="img/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here. ></a></p>
</div>
<div class="footer-column2">
<img src="img/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title">Shopify Expert at $20 / hour</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
Here is my JSfiddle:
http://jsfiddle.net/d0teo50p/7/
In my page in footer section, right side of content didn't show properly.
Can anybody help me to fix this.
Set width:960px; to div.footer and style="float:left;" to div.footer-column2 > p.footer-title and remove width:110%; to p.footer-pgf.
TRY - DEMO
HTML
<div class="wrapper">
<header id="header">
<img src="http://s30.postimg.org/rlkl06s9d/logo.jpg" alt="logo" id="logo">
<h1>The Articles</h1>
<nav class="header-nav">
<ul>
<li>Articles</li>
<li><img src="img/icon.png" alt=""> Home</li>
</ul>
</nav>
</header>
<section id="section">
<article class="article">
<img src="http://s30.postimg.org/60fickvip/articles.jpg" alt="articles" />
<p class="comments">
by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
<div class="border-bottom"></div>
<div class="article1">
<img src="http://s30.postimg.org/anq5s389d/cat.png" alt="" />
<p class="comments">
by <span class="woo">JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date>
</p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
</article>
<aside class="aside">
<img src="http://s30.postimg.org/hlpokah01/agencies.jpg" alt="agencies" />
<h3>From the Blog</h3>
<p class="windows">DAVID <i> on </i>c# Windows</p>
<p class="hex">How to convert System.Color to HTML color (hex)?</p>
<p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
view answer
</aside>
</section>
</div>
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src=".http://s30.postimg.org/rhqrjxmrx/notes.png" alt="img"></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li>COLUMN</li>
<li>TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="http://s30.postimg.org/ckiaix9jl/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here.</a></p>
</div>
<div class="footer-column2">
<img src="http://s30.postimg.org/fm92svmoh/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title" style="float:left;">Shopify Expert at $20 / hour</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
CSS
* {
box-sizing:border-box;
}
body {
font-family:Raleway, sans-serif;
text-decoration:none;
line-height:1.42857143;
margin:0;
}
html {
position:relative;
min-height:100%;
}
.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
margin:10px;
}
#header nav {
float:right;
margin-top:15px;
}
#header nav li {
display:inline-block;
}
#logo {
padding-bottom:40px;
border-bottom:solid 2px #CCC;
}
.view {
color:#FF8C00;
}
.hr-style {
background:url(http://s27.postimg.org/4sfiqgx7j/horizontal_lin
e.png) 50% 0 repeat-x;
border:0;
height:15px;
}
a {
text-decoration:none;
font-size:12px;
}
i {
font-weight:100;
}
img {
vertical-align:middle;
border:0;
}
.header-nav ul li {
display:inline;
float:right;
font-size:12px;
padding:10px;
}
.header-nav ul li a {
color:gray;
}
.comments,date {
color:gray;
font-size:12px;
font-style:italic;
}
.woo {
color:#FF8C00;
font-style:normal;
font-size:15px;
}
.lorem {
color:gray;
font-size:13px;
line-height:25px;
letter-spacing:.07pt;
width:86%;
}
.border-bottom {
border-bottom:1px solid gray;
width:90%;
padding-top:15px;
}
.dev-express {
font-size:12px;
font-family:Arial Narrow;
color:gray;
letter-spacing:1pt;
}
.article1 {
margin-top:15px;
}
.myButton {
background-color:#FF8C00;
border-radius:4px;
display:inline-block;
cursor:pointer;
color:#fff;
font-size:13px;
text-decoration:none;
padding:6px 18px;
}
.myButton:hover {
background-color:#FF8C00;
}
.myButton:active {
position:relative;
top:1px;
}
#section {
display:table;
}
.article {
width:75%;
padding-bottom:50px;
display:table-cell;
vertical-align:top;
}
.aside {
display:table-cell;
vertical-align:top;
width:25%;
}
.issue {
color:#FF8C00;
font-size:25px;
font-weight:400;
}
.windows {
font-weight:600;
font-size:12px;
}
.hex {
font-weight:600;
color:#FF8C00;
}
.sidebar-pgf {
font-size:13px;
line-height:23px;
letter-spacing:.07pt;
}
nav {
text-align:center;
}
.nav-list1 li {
display:inline;
font-size:12px;
font-weight:700;
letter-spacing:.2pt;
padding:15px;
}
.nav-list2 li {
display:inline;
font-size:11px;
font-weight:800;
letter-spacing:.2pt;
padding:15px;
}
.footer {
background-image:url(http://s27.postimg.org/80k03ijhb/footer_bg.jpg);
bottom:0;
clear:both;
height:auto;
padding:15px;
width:960px;
}
.footer-image {
float:left;
padding-right:13px;
}
.footer-title {
font-weight:700;
font-size:12px;
}
.footer-pgf {
font-size:11px;
}
.footer-link {
font-size:11px;
font-weight:600;
}
.copyright {
font-size:12px;
font-weight:500;
text-align:center;
}
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.column4-pgf {
font-size:11px;
}
.well {
background-color:#f5f5f5;
border:#e3e3e3 solid 1px;
border-radius:4px;
box-shadow:0 1px 1px rgba(0,0,0,0.05) inset;
margin-bottom:20px;
min-height:20px;
padding:19px;
}
.footer-column2 {
margin-left:45px!important;
}
section.footerWidth {
width:960px;
margin:0 auto;
}
#header h1,.footer-column1,.footer-column2 {
float:left;
}
#media min-width992px{
.column-1,.column-2,.column-3,.column-4,.footer-column1,.footer-column2 {
min-height:1px;
padding-left:15px;
padding-right:15px;
position:relative;
}
}
#media min-width 992px{
.footer-column1,.footer-column2 {
width:45%;
margin-left:15px;
}
}
Image:
I know this CSS question has been asked everywhere around the internet. But Im having massive difficulty making the purple and green divs fill their remaining space so they are the same height as the yellow twitter feed:
http://jsfiddle.net/n5558/
HTML
<div id="main">
<div id="primary" class="home">
<div id="content" role="main">
<div id="main-content" class="container_12">
<div id="info" class="grid_4">
<div id="networking">
<h2>RSViP - Business Networking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus lobortis orci, sed vestibulum leo dapibus et. Fusce in dolor velit, sit amet vehicula est. Integer elit sapien.</p> Apply for Business Networking
Free Trial
</div>
<div id="card">
<h2>RSViP - Card</h2>
</div>
</div>
<div id="twitter" class="grid_4">
<h2>News / Twitter Feed</h2>
<ul>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 04:57 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 04:08 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 03:28 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members #HartsNottingham
</p>
<p id="date">3rd Apr 03:28 PM</p>
</li>
</ul>
</div>
<div id="col3" class="grid_4">
<h2>RSViP Free Subscription</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.home #main-content {
margin-top: 23px;
margin-bottom: 23px;
height: 100%;
}
/*Col1 - Info*/
.home #info {
width: 270px;
padding-right: 30px;
background: url('images/divider.png') repeat-y top right;
height: 100%;
background: purple;
}
/*Col2 - Twitter*/
.home #twitter {
padding-left: 10px;
width: 290px;
background: yellow;
}
.home #twitter ul {
list-style: none;
margin: 0; padding: 0;
}
/* Col3 */
.home #col3 {
background: green;
}
/* 960.gs */
Thank you, Peter
Heres my Solution / Hack that worked:
.home #main-content {
margin-top: 23px;
margin-bottom: 23px;
overflow: hidden;
}
.home #main-content div {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
You can use jquery to do it easy. http://jsfiddle.net/Bushwazi/tuKEJ/
$('#main-content > div').height($('#main-content').height());
<div id="navMenu">
<div id="navigation_horiz">
<ul>
<li>
Find a Doctor
</li>
<li>
Why Interfaith
<div class="dropdown" id="dropdown_one">
<div class="test" style="padding: 10px;">History & Mission</div>
<div class="test" style="padding: 10px;">Executive Director</div>
<div class="test" style="padding: 10px;">Career Opportunities</div>
<div class="test" style="padding: 10px;">News & Events</div>
</div>
<!-- .dropdown_menu -->
</li>
<li>
Medical Services
<div class="dropdown" id="dropdown_one">
<div class="test" style="padding: 10px;">
Behavioral Health
</div>
<div class="test" style="padding: 10px;">Clinical Laboratory</div>
<div class="test" style="padding: 10px;">Dentistry</div>
<div class="test" style="padding: 10px;">Emergency</div>
<div class="test" style="padding: 10px;">Gynecology</div>
<div class="test" style="padding: 10px;">Medicine</div>
<div class="test" style="padding: 10px;">Pastoral</div>
<div class="test" style="padding: 10px;">Pediatrics</div>
<div class="test" style="padding: 10px;">Physical Medicine & Rehab</div>
<div class="test" style="padding: 10px;">Radiology</div>
<div class="test" style="padding: 10px;">Surgery</div>
<div class="test" style="padding: 10px;">Other Services</div>
</div>
<!-- .dropdown_menu -->
</li>
<li>
Medical Trainings
<div class="dropdown" id="dropdown_one">
<div class="test" style="padding: 10px;">Medical Training</div>
<div class="test" style="padding: 10px;">Behavioral Health</div>
<div class="test" style="padding: 10px;">Predoctoral Externship</div>
<div class="test" style="padding: 10px;">Podiatric Residency</div>
<div class="test" style="padding: 10px;">Dental Residency</div>
<div class="test" style="padding: 10px;">Pulmonary Residency</div>
</div>
<!-- .dropdown_menu -->
</li>
<li>
For Patients & Visitors
<div class="dropdown" id="dropdown_three">
<p>
This is a Link
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit
sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam,
a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed
massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.</p>
</div>
<!-- .dropdown_menu -->
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- #navigation_horiz -->
</div>
<!-- END NAVIGATION -->
And i have the following CSS:
#navMenu {
width: 960px;
height: 50px;
border: 1px solid black;
}
/* * {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px} */
.container {margin:0px auto; width:960px; background:#fff; padding:0px;}
/* ----------------------------------------------------- */
/* navigation styles - BEGIN */
/* style for horizontal nav */
#navigation_horiz {width:960px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_horiz ul {height:40px; display:block}
#navigation_horiz ul li {display:block; float:left; width:160px; height:40px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:160px; height:35px; padding: 12px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:5px 10px 5px 10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
/* style for each drop down - horizontal */
#navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_one a {color:red}
#navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_two a {color:black}
#navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_three a {color:gray}
For some reason the UL list is coming in the center instead of starting from LEFT of the DIV and stretch all the way to the right. you can see what it looks like here: http://i46.tinypic.com/2wnz7g1.gif
Any idea?
Thanks
ul has 40px padding-left by default, set padding: 0; and it will fix the horizontal position.
ul { padding: 0; }
Apply margin:0 (instead of margin: 0 1px 0 0) to #navigation_horiz ul li as well as #navigation_horiz ul (assuming you aren't using a css reset; also add padding:0 to the ul as well.)
Here: jsFiddlyFooFoo
User agent styles usually have padding and margin on ul just remove them
#navMenu ul{
padding: 0;
margin: 0;
}
Also your li take up more width than the ul so it wraps, you add 1px magin to each li so 1x6=6 extra pixels
http://jsfiddle.net/EJttX/1/