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.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Jost:wght#300;400;500;600;700;800&display=swap');
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
#categories{
text-align: center;
}
#categories h1{
margin-bottom:5rem;
}
.category-blocks h3{
font-size: x-large;
margin: 1rem 0;
}
.category-blocks{
background-color: lightgreen;}
.category-blocks p{
width: 80%;
margin: 1rem 0;
margin: auto;
text-align: justify;
margin-bottom: 1rem;
}
.category-blocks .btn-primary{
border-radius: 2rem;
background-color: transparent;
border:2px solid #03bf72;
padding: 0.7rem 1.8rem;
color: #03bf72;
}
.category-blocks .fas{
color: #03bf72;
font-size: 1.5rem;
}
</style>
<body>
<section id="categories">
<div class="row">
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
</div>
</section>
</body>
</html>
I need to set 3 blocks side by side in a page, so I applied 'col-md-4', unfortunately I was not getting space in middle of them even after I tried all the possible ways. Please help me out.
Why dont you do it with display: flex or maybe display: grid, with that you can do a gap: X and that will do the separation.
NOTE: the gap: X, can be diferent if you are using flex or grid, you can find it in here:
flex - https://coryrylan.com/blog/css-gap-space-with-flexbox
grid - https://developer.mozilla.org/es/docs/Web/CSS/gap
I've been going in circles for 1 day on a simple footer which stays at the bottom of the page, unfixed.
I've managed to have it at the bottom of a full screen page. However, when I decrease the width of my browser's window to simulate a "responsive display", the footer stays at the same place when I scroll down the page and thus does not flush down.
Here is my html :
<html>
<body>
<div class="container">
<div class="row text-center">
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
And my CSS :
html {
height: 100%;
}
body {
height: 100%;
padding-bottom: 30px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
I've tried Bootstrap's column on the footer like this :
<div class="col-md-12 col-xs-12">
<div class="footer text-center">
<p class="small">© 2017 Le Point G</p>
</div>
</div>
But this method does not seem to be appropriate as it makes it inconsistent on my different pages as the amount of content differs from one page to another, pushing the footer more or less down.
Any better suggestions ?
If I understand your question correctly, you want the footer always to be fixed to the bottom of the window, reguardless of the length of the content of the page.
If so, try position: fixed instead of position: absolute
html {
height: 100%;
}
body {
height: 100%;
padding-bottom:30px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container">
<div class="row text-center">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
you can have position:absolute just add
min-height:100%;position:relative;
to your container or row.
.row {
min-height:100%;
position:relative;
}
html {
height: 100%;
}
body {
padding-bottom: 30px;
}
.footer {
position:absolute;
background-color: blue;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="row text-center" >
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
Explanation
The container div has a min-height:100% -- this will ensure it stays the full height of the screen even if there is hardly any content. The container div is set to position:relative; this allows us to absolutely position elements inside it.
The footer has a set height in px. The footer is absolutely positioned with bottom:0 and this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser view-port as it is set to min-height:100% and the footer sits at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the view-port - the footer is still positioned at the bottom of the container div. The footer is also set to width:100%; so it covers the whole page.
With Bootstrap3 you can use the class navbar-fixed-bottom.
Its not that nice but it works.
HTML:
<html>
<head>..</head>
<body>....
<div class="navbar-fixed-bottom">
<p>Your Text</p>
</div>
</body>
</html>
Something like that, but with "div" tags - w3schools
Snippet:
html, body {
margin: 0%;
padding: 0%;
}
.container {
height: 600px;
background-color: #6c6c6c;
}
myFooter {
background-color: #fff;
}
#media screen and (min-width: 480px){
footer {
position: absoulute;
bottom: 0;
background-color: #000 !important;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-center">
<p>Some Text in Container</p>
</div>
<footer class="myFooter text-center">
<p>Footer Text - Resize Window</p>
</footer>
</body>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<!-- Footer -->
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Very long link 1
</li>
<li>
Very long link 2
</li>
<li>
Very long link 3
</li>
<li>
Very long link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
MDBootstrap.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
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;
}
So I have two divs next to each other which have the class .category and they are supposed to be responsive.
<div class="content">
<div class="category">
<img src="images/category1.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor.
</p>
</div
<div class="category">
<img src="images/category2.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
</p>
</div>
</div>
This is my CSS:
.content {
width: 100%;
background: red;
}
.category {
max-width: 470px;
background: #ffffff;
display: inline-block;
vertical-align: top;
position: relative;
}
When I start resizing the window, the second .category block moves underneath the first .category block. However, I want both the .category blocks to reduce in width and stay next to each other.
Anybody got any suggestions?
First, you have some typographic errors in your HTML Markup (you are missing the > sign on the closing div tag of the first category div).
Second, you should be using percentage widths for responsive elements like this :
FIDDLE
CSS :
.content {
width: 100%;
background: red;
}
.category {
max-width:470px;
width: 50%;
background: #ffffff;
float:left;
vertical-align: top;
position: relative;
}
add float:left; to .category in css and use either % or a css media query
#media(min-width:something;){
.category {
width: something;
}
}
to set the width of the elements.
I'm trying to create a page with two divs inside a content div to act as columns. While I understand that this is a question that is often asked here, the difference is, I need the left side to be a title for the corresponding content on the right, but the content on the right will differentiate in height, and I need this to affect where the next title below on the left will appear.
Below is an image of how I want this to work, and how I'm guessing it can be done?
http://i.stack.imgur.com/aY8bt.png
Currently I'm doing this with HTML tables, which we all know is messy!
Many thanks in advance!
Dylan
without table, we can do it like this:
<div id="master">
<div class="title">TITLE A</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
<div class="magicClear"></div>
<div class="title">TITLE B</div>
<div class="content">Tiny content with tiny height</div>
<div class="magicClear"></div>
<div class="title">TITLE C</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
<div class="magicClear"></div>
</div>
css :
#master {
width: 650px;
margin: auto;
}
.title {
float: left;
width: 100px;
}
.content {
width: 450px;
padding-left: 100px;
margin-bottom: 20px;
}
.magicCLear {
clear: both;
}
http://jsfiddle.net/djedjex/GU7RW/1/
try this one
table
{
border:none;
}
table td:first-child
{
border-right:2px solid #000;
text-align:right;
}
table td
{
padding:10px;
vertical-align:top;
min-width:100px;
}
http://jsfiddle.net/GRX99/2/
if you used table tags, you can turn them into regular tags and use display:table / table-cell :
demo : http://codepen.io/anon/pen/aEBkA
HTML BLOCK for your title > content . use as many as needed.
<article>
<h1>titre</h1>
<div>
<p>text</p>
<p>and text again</p>
</div>
</article>
and minimal CSS:
article {
display:table;
table-layout:fixed;
/* tune next 2 rules */
width:80%;
margin:auto;
}
article h1,
article div {
display:table-cell;
padding:0.5em;
}
article h1 {
width:15%;
border-right:solid;
}
You can also do something fluid, Bootstrap inspired.
<div>
<div class="row">
<div class="span2">
<p>Title A</p>
</div>
<div class="span10">
<p>Very long content</p>
</div>
</div>
<div class="row">
<div class="span2">
<p>Title B</p>
</div>
<div class="span10">
<p>Another very long content</p>
</div>
</div>
</div>
And the CSS:
[class*="span"] {
float: left;
}
.span2 {
width: 20%;
}
.span10 {
width: 80%;
}
.span2 p {
float: right;
}
You have to adjust margins/paddings, but that's it.