image
So I have a div full of main article content with a width of 600px and I would like to have these links as well at the side, I imagine it would be in the same div but I can't seem to get the right effect and need some help with this.
Thanks a lot.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="pagewrap">
<div id="logos">
<img id="logo" src="img/logo.png">
<h1 id="name">Company Name</h1>
<img class="socialmedia" src="img/facebook.png">
<img class="socialmedia" src="img/twitter.png">
<img class="socialmedia" src="img/googleplus.png">
</div>
<div id="header">
<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
<li>Home</li>
<li>eBooks</li>
<li>Magazines</li>
<li>Movies</li>
<li>Help</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div id="content">
<h2>Lorem Ipsum Dolor Sit</h2>
<p id="article-information">posted on 15 May 2015 by Author</p>
<img id="main-article-image" src="img/placeholder.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer
fringilla. Integer fringilla. Pellentesque acturpis. Sed elementum, felis quis porttitor
sollicitudin, augue nulla sodales sapien, amet posuere quam purus at lacus. Nam id neque. Morbipulvinar nulla sit amet nisl. Etiam pharetra lacus sed velit
imperdiet bibendum. ed quis elit. In hac habitasse platea dictumst. Maecenas
justo. Donec interdum vestibulum libero. Nam laoreet dui sed
magna. Nam consectetuer mollis dolor. Aenean ligula.
liquam sed erat. Donec interdum vestibulum libero. Mauriset dolor.</p>
<div id="more-links-list">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
</div>
<div id="sidebar">
<h3>A guide to snoopsetting</h3>
<img class="aside-images" src="img/placeholder.png">
<h3>Welcome to the Surveillance State</h3>
<img class="aside-images" src="img/placeholder.png">
</div>
<div id="footer">
</div>
</div>
</bo
dy>
CSS
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#logo {
width: 20%;
height: auto;
position: relative;
right: 25px;
top: 50px;
}
#name {
position: relative;
bottom: 60px;
left: 170px;
font-style: italic;
font-size: 55px;
height: 30px;
}
.socialmedia {
position: relative;
width: 8%;
bottom: 155px;
height: auto;
float: right;
}
#main-article-image {
width: 600px;
height: 450px;
}
.aside-images {
width: 340px;
height: 255px;
}
#more-links-list {
display: inline;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#logos {
height: 160px;
}
#header {
height: 50px;
}
#content {
position: relative;
width: 600px;
float: left;
text-align: justify;
}
#more-links-list {
float:right;
padding: 10px;
margin-left:10px;
margin-bottom:10px;
background:#ddd;
}
#sidebar {
width: 340px;
float: right;
position: relative;
bottom: 34px;
}
#footer {
clear: both;
width: auto;
height: 100px;
}
#article-information {
margin: 0px;
}
h2 {
margin: 0px;
padding-top: 56px;
}
h3 {
margin: 0px;
padding-top: 38px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
width: 16.65%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#header, #content, #sidebar {
margin-bottom: 5px;
}
#footer {
background-color: #eee;
border-style: solid;
border-width: 1px;
}
You can do this by placing a div with float:right; style inside the div that holds your content (article text), I created this example for you:
https://jsfiddle.net/davoscript/tjf56jLw/4/
<p>
<!-- The floating box -->
<div id="more-links-list" style="float:right;">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
<!-- The article content -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer...
</p>
Let me know if that works.
You should probably put the links into an <aside>. This could go below the code for the text in your div and then styled with either a float or positioning. It would then be a matter of getting your styling to allow the text to wrap under the links.
Related
I have this two column layout, made with display: table and display: table-cell, and I want to put in the second column a div with horizontal scroll, but the table expands itself and the scroll goes to the entire page rather then the div.
HTML
<div class="wrapper">
<div id="one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis finibus metus. Suspendisse commodo rutrum sapien, eu faucibus metus. Nunc elementum augue eu aliquet condimentum.
</div>
<div id="two">
<div id="horizontal">
<img src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" />
</div>
</div>
</div>
CSS
.wrapper {
display: table;
table-layout: fixed;
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
display: table-cell;
width: 100%;
}
#horizontal {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
Here is the jsfiddle:
http://jsfiddle.net/cUCvY/2597/
In this example I'd like to have the horizontal scroll active on the div with the images inside and not on the page.
Hope i understood correctly:
.wrapper {
display: table;
table-layout: fixed;
width:100%
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
}
#horizontal {
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}
http://jsfiddle.net/cUCvY/2600/
I am using Bootstrap with a sticky footer and off-canvas menu. Sticky footer works fine on desktop view, but footer begins to overlap content on mobile view. I think it is due to the .row-offcanvas position being set to relative on mobile media query. If I remove the offcanvas menu the sticky footer works as expected on mobile devices. The other issue is when you scroll down in mobile view white space appears under the footer.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/master-simple.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<header>
<div class="container">
<div class="row">
<div class="col-xs-4 headerLinks">
Coverage Details
<div id="drawerNavigationID" data-toggle="offcanvas" class="hidden-sm">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4 text-right headerLinks">
<!-- Click to call on Mobile Device -->
Contact Us
</div>
</div>
</div>
</header>
<!-- Off Canvas Menu -->
<div class="container">
<div class="row">
<div class="col-sm-6 sidebar-offcanvas visible-xs">
<ul>
<li>Coverage Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container mainWrapper">
<div class="row">
<div class="col-md-10 col-centered" id="confirmationWrapper">
<h2 class="noBorderBottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet tempor nisl, ut rutrum lacus vulputate vel.</h2>
<h3>CLAIM NUMBER: 12345678954</h3>
<p class="claimNumberText">Nulla libero enim, consequat at pulvinar eu, ultrices a risus.</p>
<p>Nulla libero enim, consequat at pulvinar eu, ultrices a risus. Mauris bibendum enim non magna maximus, non tempor lacus lacinia. Fusce vestibulum tincidunt vulputate. Suspendisse eu erat et neque facilisis consequat id in quam. Cras convallis massa at ornare hendrerit.</p>
<div class="row text-center">
Shop
</div>
</div>
</div>
</div><!-- End Page Content -->
<footer>
<div class="container">
<ul>
<li>Terms of Use | </li>
<li>Privacy Policy</li>
</ul>
<p>© 2015 ANulla libero enim</p>
</div>
</footer>
</div><!-- End Container-fluid Row -->
</div><!-- End Container-fluid -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/offcanvas.js"></script>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 196px;
}
* {
font-weight: normal!important;
margin: 0;
padding: 0;
outline: 0;
outline-style: none;
}
header {
font-family: 'aig_futura_medregular', aig_futura_medregular, Arial, Helvetica, sans-serif;
position: absolute;
top:0;
z-index: 100;
height: 92px;
width: 100%;
padding-top: 15px;
color: #fff;
background-color: rgba(0,164,228,0.9);
}
header a {
font-family: "aig_futuraregular", Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
color: #fff!important;
}
header a:hover {
border-bottom: 1px solid #fff;
}
header .headerLogo {
width: 116px;
height: 63px;
cursor: pointer;
background: url(../img/aigLogo.png) no-repeat center bottom;
}
.headerLinks {
margin-top: 20px;
}
footer {
font-size: 14px;
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 186px;
padding: 40px 20px 20px;
color: #fff;
background-color: #252525;
}
footer ul {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
footer ul li {
display: inline;
}
footer li a {
color:#fff;
}
.mainWrapper {
margin-top: 92px;
}
#media screen and (max-width:768px){
#drawerNavigationID{
padding-left: 10px;
}
#drawerNavigationID span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin-bottom: 7px;
}
.row-offcanvas {
position: relative;
bottom: 0;
min-height: 100vh;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -85%;
padding: 0 0 0 20px;
background-color: #54565b;
}
.row-offcanvas-left .sidebar-offcanvas ul li {
font-size: 18px;
padding: 15px;
text-transform: uppercase;
border-bottom: 1px solid #696b6f;
}
.row-offcanvas-left .sidebar-offcanvas a {
text-decoration: none;
color: #ffffff;
}
.row-offcanvas-left.active {
left: 85%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
bottom:0;
width: 85%;
}
}
<article style="max-width:500px;" class="post" id="post-<?php the_ID(); ?>">
<div class="circle">
<div class="month"><?php the_time(d) ?></div>
<div class="year"><?php the_time('M Y');?></div>
</div>
<div class="thot">
<h4><?php the_title(); ?></h4>
<?php the_excerpt('Read More'); ?>
<hr />
</div>
</article>
<style>
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: white;
color:black;
line-height:35px;
}
.month{
font-size:60px;
font-weight:bold;
}
.year{
font-size:20px;
}
</style>
What is the best way to move the "thot" div next to the "circle" div?
("Cirle") [POST aka "thot div"]
Link http://ramovamusic.com/?page_id=165
Example: ramovamusic.com/example.jpg
So now that I understand your question. The problem is you have a set width on your article tag (500px) this needs to be increased so you can float your class circle and class thot. that way they will be next to each other.
Here is a working demo as to what I am talking about New Demo Working
Notice I removed the width on the article, added float right and width to class thot and float left on the circle. And now they are on the same line. You need to fiddle with it a bit to align it to your linking.
html:
<article style="" class="post" id="post-171">
<div class="circle">
<div class="month">20</div>
<div class="year">Mar 2015</div>
</div>
<div class="thot">
<h4>test 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tellus urna, mollis in nibh nec, fermentum rhoncus lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ante arcu, laoreet ut efficitur vel, ornare sed risus. Cras eget interdum erat, finibus facilisis justo. Nam lorem mi, laoreet at dui non, rutrum semper felis. <a class="read-more" href="http://ramovamusic.com/?p=171">Read More</a></p>
<hr />
</div>
</article>
css:
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: red none repeat scroll 0% 0%;
color: #000;
line-height: 35px;
float:left;
}
.thot{
float:right;
width:60%;
}
Add float:left to your circle div and some right margin, and for the .date class, add:
.date {
transform: translateY(-50%);
width: 165px;
top: 50%;
position: relative;
}
for .thot class add:
.thot {
float:left;
width: 300px; /* or whatever width works for you */
}
and finally you need to clear floats:
.post:after {
content: '';
display: table;
clear:both;
}
Here you go, better to apply the circle in a span to keep all the text together! Otherwise it can end up getting tricky like you saw!
https://jsfiddle.net/75tn8yps/3/
div{
float:left;
}
span.circle{
border: 1px solid red;
border-radius: 100%;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 10px;
line-height: 95px;
text-align:center;
}
p{
text-align:center;
margin-top:40px;
}
Demo In Fiddle
I did change few things in the CSS File
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
color:white;
border-radius: 50%;
background: black;
color:black;
position:absolute;
}
.month{
font-size:40px;
font-weight:bold;
color:white;
line-height:90px;
}
.year{
font-size:20px;
color:white;
line-height:60px;
}
.thot{
border:1px solid black;
float:right;
width: calc(100% - 180px);
height:200px;
position:relative;
}
The new CSS. Check The fiddle.
Good Day Im new to CSS
And recently after I have finish my first project, an extra white space came up on my page, Then I have found out that the hr tag that I am using is one reason why there an extra white space(I guess?) , when I put hr size
#hr{
width:960px;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;
}
white page will appear
But when I put
#hr {
width:70%;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;
}
This will be ok but zooming it in/out will move the hr line,
If needed I'll post the codes but my codes is so many...
Right, I think ill put my codes,
HTML CODES:
<!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>
<title>Beginner</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
</style>
</head>
<body>
<div id="top-most">
</div>
<div id="wrapper">
<div id="logo">
<img alt="logo" src="images/logo.png" />
</div>
<div id="header">
<p>info#CreativeStudio.com</p>
</div>
<div id="top-bar-selection" >
<ul>
<li>HOME</li>
<li> ABOUT US </li>
<li> PORTFOLIO </li>
<li> SERVICES </li>
<li> BLOG </li>
<li> CONTACT US </li>
</ul>
</div>
</div>
<hr id="hr" />
<div id="banner">
<object id="flash1" data="Beginner.swf" type="application/x-shockwave-flash" style="width: 960px; height: 380px">
<param name="movie" value="Beginner.swf" />
</object>
</div>
<div id="hr2">
<hr />
</div>
<div id="information">
<div id="about-us-section">
<div id="about-us">
<h3>→ ABOUT US</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
<p style="height: 3px"></p>→<h4>Read</h4>
</div>
</div>
<div id="our-benefits-section">
<div id="our-benefits">
<h3>→ OUR BENEFITS</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>☑Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </p>
<p>☑ Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat</p>
<p>☑Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </p>
</div>
</div>
<div id="testimonials-section">
<div id="testimonials">
<h3>→ TESTIMONIALS</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
<h5>Rafi, Graphicsfuel.com</h5></div>
</div>
</div>
<div id="hr">
<hr />
</div>
<div id="our-portfolio-section">
<div id="our-portfolio">
<h3>→ OUR PORTFOLIO</h3>
</div>
<img alt="PortfolioA" src="images/Portfolio A.jpg" id ="picA" />
<img alt="PortfolioB" src="images/Portfolio B.jpg" id ="picB"/>
<img alt="PortfolioC" src="images/Portfolio C.jpg" id ="picC"/>
<img alt="PortfolioD" src="images/Portfolio D.jpg" id ="picD"/>
</div>
<div id="hr">
<hr />
</div>
<div id="information2">
<div id="blog-updates-section">
<div id="blog-updates">
<h4>→ BLOG UPDATES</h4>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
</div>
</div>
<div id="socialmedia">
<h6> → CONNECT WITH US</h6>
<img alt="" src="images/Icon/Twitter.png" />
<img alt="" src="images/Icon/Facebook.png" />
<img alt="" src="images/Icon/Flickr.png" />
<img alt="" src="images/Icon/RSS.png" />
</div>
</div>
<div id="footerbgcolor">
<div id="footer">
<div class="below-bar-selection">
<p>Home | About Us | Portfolio | Services | Blog | Contact Us</p>
<p>© 2010 CreativeStudio. All Rights Reserved</p>
</div>
<div class="logo-small" style="left: 770px; top: 1240px; width: 128px">
<img alt="" src="images/Icon/Logo%20Small.png" />
</div>
</div>
</div>
</body>
</html>
CSS CODES:
#top-most { background-color:black; height:17px; }
#wrapper { width :960px; height:130px ; margin:0px auto; background-color: #F4F4F4; overflow:hidden; }
#logo { margin: 19px 0 0 10px; float:left; }
#header { float: right; margin: 19px 3px 0 0; }
#header p { color: #979899; }
#top-bar-selection { width:960px;position :absolute ; overflow:hidden; display:inline-block; margin:70px auto 0 -160px; word-spacing:1px; letter-spacing:1px;}
#top-bar-selection ul{color:orange; text-align: right; }
#top-bar-selection ul li {display :inline; font-size:12px; font-family: arial black; margin: 0 32px 0 0;}
#top-bar-selection ul li a:link {color: #fe9a00; font-family: Arial black; }
#top-bar-selection ul li a:hover {color: #000000; font-family: Arial black; }
#hr { width: auto; margin: 0px auto; color:#C0C0C0; height: 12px; margin-bottom:15px; overflow:hidden;}
#hr2 { width:960px; margin: 0px auto ; margin-top:10px; height:9px;}
#banner { width:960px; height:380px ; margin:0px auto; background-color: black; }
#information { width:960px; margin :0px auto 0 auto; height:235px; padding-top : 15px; margin-top:13px; }
#about-us-section { width: 266px; margin-right: 600px; background-color: #F4F4F4; position:absolute; padding-right: 10px; }
#about-us-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#about-us-section p { padding-top: 10px; font-weight:lighter;}
#about-us-section h4 { color:#FF9933; display:inline; line-height:30px;}
#about-us-section h4 a:link {color: #fe9a00; font-family: Arial black; }
#about-us-section h4 a:active {color: #fe9a00; font-family: Arial black;}
#about-us-section h4 a:visited {color: #fe9a00; font-family: Arial black;}
#about-us-section h4 a:hover { color:#000000; }
#our-benefits-section { width: 270px; margin: 0 0 0 355px; background-color : #F4F4F4; position:absolute; padding-right: 10px;}
#our-benefits-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#our-benefits-section p { padding-top: 10px; }
#testimonials-section { width: 270px; margin: 0 0 0 700px; position:absolute; padding-right: 10px; }
#testimonials-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#testimonials-section p { padding-top: 10px; font-weight:300; }
#testimonials-section h5 { padding-top: 10px; font-style:italic; }
#our-portfolio-section { width:960px; margin: 0px auto 0 auto; display: block; height:205px; }
#our-portfolio-section our-portfolio { margin: 5px 2px 0 0; }
#our-portfolio-section img { padding: 15px; display:inline;}
#information2 { width:960px; margin :0px auto 0 auto; height:145px; margin-top:5px; }
#blog-updates-section { width:600px; height:50px; position:absolute; }
#blog-updates-section h3 {margin: 8px 5px 0 0; line-height:10px;}
#blog-updates-section p {margin: 28px 5px 0 0; }
#blog-updates .content { margin: 28px 5px 0 0; float:left; position:absolute;}
#socialmedia { float:right; overflow:hidden; position:absolute;margin: 10px 720px; width: 150px; height: 125px; width:200px;}
#socialmedia h6 { font-size:10px;}
#socialmedia img { padding: 6px; margin-top:20px; }
#footerbgcolor { background-color:#E2E2E2; height:100px; }
#footer { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#footer .below-bar-selection { margin: 30px 0 0 20px; float:left; width: 750px; }
#footer a:link {color: #000000; font-family: Arial black; }
#footer a:active {color: #000000; font-family: Arial black;}
#footer a:visited {color: #000000; font-family: Arial black;}
#footer h4 a:hover { color:#000000; font-family:Arial black;}
#footer .logo-small { float:right; padding-top: 15px;}
If you already got a better solution, then forget this message,
But i noticed something.
according to your code
#hr {
width: auto;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;}
Since your id of Wrapper is 960 pixels,
use that width template to set your HR' width value.
so change:
width: auto;
to
width: 958px;
Notice: 960px looks a bit too long, so i shaved some pixels out to fit the alignment. But if 960 looks better, then choose 960.
Well first of all i don't see any white space on right side of the page rather space between the hr tag due to the height you have given.
Secondly,
hr tag will automatically create a line. If you want to give it an id that means you want to add additional styling to the hr element.
If i am understanding properly, than you shouldn't even use WIDTH.
#hr{
// no need to use width as it will automatcally fill it self
margin: 0px auto;
color:#C0C0C0;
height: 12px; // only needed if you want to create space inbetween
margin-bottom:15px;
overflow:hidden;
}
and use it as
<hr id="hr" />
Hope this answers your question.
Since you only posted the CSS code without the HTML code, it may be hard for people to see the whole problem, but from the information you posted, this will be my proposed solution,
This css code:
width:960px;
makes your HR a fixed width of 960 pixels.
This css code:
width:70%;
makes your HR take up 70% of its container's width.
You could just try setting the width to 100%.
p.s. Why do you need it to be 70% ?
hr { //remove # so it will apply to <hr> tag
width:70%;
margin: 10px auto; // change the margin size so the hr line can be seen
color:#C0C0C0;
margin-bottom:15px;
overflow:hidden;
}
I think the problem that could remove the hr line is only about margin. If the margin is set to 0, then the hr line could be override by another tag
i got a tricky situation here. im trying to center 3 divs inside my footer and they need to have dynamic width, like min-width.
[cotainer [first] [second] [third] /container]
my setup is this
<footer>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
</footer>
footer #container { width: 800px; margin: 0 auto; }
#container #first,#container #second,#container #third
{
float: left;
min-width: 200px;
height: 25px;
background: /* image url */
padding: 4px;
margin: 0 20px 0 0;
}
#container #third { margin-right: 0; }
You should use display: table; and table-cell.
#container {
display:table;
}
#first, #second, #third {
display: table-cell;
width: 200px;
height: 40px;
border: 1px dashed #000;
}
Demo available here.
set container to display as:table and set it's margin to 0 auto.
#container {
display:table;
margn:0 auto;
whitespace: nowrap;
}
#first, #second, #third {
min-width: 200px;
float:left
...
}
Demo: http://jsfiddle.net/AZ4yT/1/
Edit: It gets left aligned in IE. so you might wanna use a workaround for that
What about using display: inline-block? You can see a jsFiddle of it here:
http://jsfiddle.net/S7bKT/1/
HTML
<div id="container">
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam scelerisque euismod auctor. Sed pulvinar nulla eu
lorem iaculis ultrices. Mauris
</div>
<div id="second">Lorem ipsum dolor sit amet</div>
<div id="third">Sed pulvinar nulla eu lorem iaculis ultrices</div>
</div>
CSS
#container {
width: 500px;
background: #dedede;
margin: 0 auto;
text-align: center;
}
#first, #second, #third {
display: inline-block;
min-width: 50px;
max-width: 120px;
min-height: 100px;
zoom: 1; /* Fix for IE */
_display: inline; /* Hack for IE */
margin-right: 20px;
vertical-align: top;
}
#first {
background: #f00;
}
#second {
background: #0f0;
}
#third {
background: #00f;
}
#container div:last-child {
margin-right: 0;
}