I have 2 issues with my test page. I'm trying to get header to take up width of page. I set the width to 100% but it still will not expand out to width of page. And the dropdown for the "Links" item appears behind the wrapper element and therefore it is not possible to click on any of the underlying links. Thank you.
Codepen: https://codepen.io/centem/pen/dBdwxw
header {
margin: 0 auto;
width: 100%
height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display:none;
}
ul li:hover ul li {
display: block;
}
header is already set to 100% witdth. However, you've set fixed width and the background to the li. You can simply use flexbox and set flex: 1 to the items without worrying about their width.
body {
margin: 0 auto;
font: 1.1em;
background-image: url('CNDsplash.jpg');
background-repeat: no-repeat;
background-position: center;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 400;
}
header {
margin: 0 auto;
width: 100%;
height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
}
header ul li {
height: 40px;
flex: 1;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
#title-heading {
float: left;
}
.hidden {
display: none;
}
.wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 2px solid #eee;
background: #fefefe;
opacity: 0.9;
filter: alpha(opacity=90);
/* for ie8 and earlier */
}
.upload-console {
/*background: #fefefe;*/
/*border: 2px solid #eee; */
padding: 20px;
/*opacity: 0.9;*/
/*filter: alpha(opacity=50);*/
/* for IE8 and earlier */
}
.upload-console-header {
padding: 0 0 20px 0;
margin: 0;
border-bottom: 2px solid #eee;
font-weight: 600;
margin-bottom: 20px;
}
.upload-console-drop {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
color: #ccc;
text-align: center;
margin-bottom: 20px;
}
.upload-console-drop.drop {
border-color: #222;
color: #222;
}
.upload-console-body {
margin-bottom: 20px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
box-sizing: border-box;
margin-bottom: 20px;
}
.bar-fill {
height: 30px;
display: block;
background: cornflowerblue;
width: 0;
border-radius: 3px;
-webkit-transition: width 0.8s ease;
transition: width 0.8s ease;
}
.bar-fill-text {
color: #fff;
line-height: 30px;
margin-left: 5px;
}
.upload-console-upload {
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.upload-console-upload span {
float: right;
}
<header>
<ul>
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li><a>Docs</a></li>
<li><a>Links</a>
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</li>
</ul>
</header>
<div class="wrapper">
<div id="form-heading">
</div>
<div class="upload-console">
<br>
<h2 class="upload-console-header">FTS</h2>
<div class="upload-console-body">
<h3>Select files</h3>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="standard-upload-files" multiple>
<input type="submit" value="Upload files" id="standard-upload">
</form>
<h3>Or drag and drop files below</h3>
<div class="upload-console-drop" id="drop-zone">
Just drag and drop files here
</div>
<div class="bar">
<div class="bar-fill" id="bar-fill">
<div class="bar-fill-text" id="bar-fill-text"></div>
</div>
</div>
<div id="uploads-finished" class="hidden">
<h3>Processed Files</h3>
</div>
</div>
</div>
</div>
body {
margin: 0 auto;
font: 1.1em;
background-image: url('CNDsplash.jpg');
background-repeat: no-repeat;
background-position: center;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 400;
}
header {
margin: 0 auto;
width: 100% height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
z-index: 1;
position: relative;
}
header ul li {
display: flex;
flex-grow: 1;
height: 40px;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
width: 100%;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
#title-heading {
float: left;
}
.hidden {
display: none;
}
.wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 2px solid #eee;
background: #fefefe;
opacity: 0.9;
filter: alpha(opacity=90);
/* for ie8 and earlier */
}
.upload-console {
/*background: #fefefe;*/
/*border: 2px solid #eee; */
padding: 20px;
/*opacity: 0.9;*/
/*filter: alpha(opacity=50);*/
/* for IE8 and earlier */
}
.upload-console-header {
padding: 0 0 20px 0;
margin: 0;
border-bottom: 2px solid #eee;
font-weight: 600;
margin-bottom: 20px;
}
.upload-console-drop {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
color: #ccc;
text-align: center;
margin-bottom: 20px;
}
.upload-console-drop.drop {
border-color: #222;
color: #222;
}
.upload-console-body {
margin-bottom: 20px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
box-sizing: border-box;
margin-bottom: 20px;
}
.bar-fill {
height: 30px;
display: block;
background: cornflowerblue;
width: 0;
border-radius: 3px;
-webkit-transition: width 0.8s ease;
transition: width 0.8s ease;
}
.bar-fill-text {
color: #fff;
line-height: 30px;
margin-left: 5px;
}
.upload-console-upload {
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.upload-console-upload span {
float: right;
}
<header>
<ul>
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li class="dropdown"><a>Links</a>
<ul class="dropdown-content">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</li>
</ul>
</header>
<div class="wrapper">
<div id="form-heading">
</div>
<div class="upload-console">
<br>
<h2 class="upload-console-header">FTS</h2>
<div class="upload-console-body">
<h3>Select files</h3>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="standard-upload-files" multiple>
<input type="submit" value="Upload files" id="standard-upload">
</form>
<h3>Or drag and drop files below</h3>
<div class="upload-console-drop" id="drop-zone">
Just drag and drop files here
</div>
<div class="bar">
<div class="bar-fill" id="bar-fill">
<div class="bar-fill-text" id="bar-fill-text"></div>
</div>
</div>
<div id="uploads-finished" class="hidden">
<h3>Processed Files</h3>
</div>
</div>
</div>
</div>
<script src="upload.js"></script>
<script src="global.js"></script>
I have a input text and below this input text I want to have a div with a green color that has some text. But I want that this green area to occupy the same with of the input element, but it is not working. Do you know what is not correct?
.main-search {
width: 100%;
position: relative;
background-color: yellow;
}
.search {
margin: 20px auto;
width: 100%;
font-size: 0.85em;
float: left;
background-color: white;
padding: 50px;
border-radius: 4px;
}
.search_auto_complete {
background-color: green;
text-align: left;
color: gray;
font-size: 1.1em;
border: 1px solid black;
z-index: 10;
position: fixed;
width: inherit;
padding: 0 !important;
}
.search_auto_complete li {
padding: 10px;
background-color: $color-white;
border-bottom: 1px solid $color-gray;
}
.auto_complete_category {
background-color: $color-light-plus !important;
color: $color-gray-plus-plus;
font-weight: bold;
}
.auto_complete_category:hover {
background-color: $color-light-plus !important;
cursor: auto !important;
color: $color-gray-plus-plus !important;
}
.events_auto_complete li:hover {
background-color: $color-primary;
cursor: pointer;
color: $color-white;
}
.search_events_box button {
border-left: none;
color: #fff;
font-weight: 700;
padding: 17px;
}
.input_search_event {
position: relative;
border: 1px solid red;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0;
}
input {
padding-left: 40px !important;
}
input {
padding: 15px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.div {
width: 60%;
margin: 0 auto;
padding: 20px 0;
}
<section class="content main-search">
<div class="div">
<h1>Title</h1>
<div class="search">
<div class="input_search">
<input id="auto" value="category" type="text">
<ul class="search_auto_complete">
<li class="auto_complete_category">Categories</li>
<li>Category 1</li>
</ul>
</div>
</div>
</div>
</section>
Example: https://jsfiddle.net/k9uL4zon/
Add position: relative to your container .input_search and replace position: fixed with position: absolute and width: inherit with width: 100% for your element .search_auto_complete. Demo:
.input_search {
position: relative; /* new */
}
.main-search {
width: 100%;
position: relative;
background-color: yellow;
}
.search {
margin: 20px auto;
width: 100%;
font-size: 0.85em;
float: left;
background-color: white;
padding: 50px;
border-radius: 4px;
}
.search_auto_complete {
background-color: green;
text-align: left;
color: gray;
font-size: 1.1em;
border: 1px solid black;
z-index: 10;
position: absolute;
width: 100%;
padding: 0 !important;
}
.search_auto_complete li {
padding: 10px;
background-color: $color-white;
border-bottom: 1px solid $color-gray;
}
.auto_complete_category {
background-color: $color-light-plus !important;
color: $color-gray-plus-plus;
font-weight: bold;
}
.auto_complete_category:hover {
background-color: $color-light-plus !important;
cursor: auto !important;
color: $color-gray-plus-plus !important;
}
.events_auto_complete li:hover {
background-color: $color-primary;
cursor: pointer;
color: $color-white;
}
.search_events_box button {
border-left: none;
color: #fff;
font-weight: 700;
padding: 17px;
}
.input_search_event {
position: relative;
border: 1px solid red;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: 0;
}
input {
padding-left: 40px !important;
}
input {
padding: 15px;
width: 100%;
}
.content {
float: left;
width: 100%;
}
.div {
width: 60%;
margin: 0 auto;
padding: 20px 0;
}
<section class="content main-search">
<div class="div">
<h1>Title</h1>
<div class="search">
<div class="input_search">
<input id="auto" value="category" type="text">
<ul class="search_auto_complete">
<li class="auto_complete_category">Categories</li>
<li>Category 1</li>
</ul>
</div>
</div>
</div>
</section>
The link to my testing page—where my testing of centering the nav-ul-li bar is taking place—is as follows: http://bramh.coornhert.website/startpagina.html
the code is as follows:
header {
color: GhostWhite;
text-align: center;
font-size: 60px;
margin: 0px;
font-family: courier new;
}
body {background-image: url("images/wallpapermain.jpg");
color: white;
}
p { border-width: 3px;
border-style: groove;
border-color: light-blue;
background-color: black;
border-radius: 10px;
height: 1200px;
width: 1000px;
text-align: center;
font-family: "verdana";
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 50px;
}
img {border-radius:10px;
}
a:link.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:visited.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:hover.img { color: red;
text-decoration:underline;
font-weight:bold;
}
/* menu */
a:link,a:visited {
font-weight: bold;
color: white;
background-color: black;
border: 2px #033 ridge;
border-radius: 10px;
width: 140px;
text-align: center;
padding: 4px;
margin-bottom: 10px;
text-decoration: none;
}
a:hover,a:active {
background-color: dark-grey;
color: orange;
width: 140px;
}
nav {
width: 800px;
height: 30px;
padding-top: 0px;
}
ul {
margin:0;
position: fixed;
list-style-type: none;
padding: 0;
text-align: center;
}
nav{
text-attachment: fixed;
}
a.huidig_blauw {
background-color: white;
color: black;
}
a.huidig_rood {
background-color: green;
color: black;
width: auto;
}
a.tweede_menu {
background-color: red;
color: blue;
width: auto;
}
/* CSS Document */
<!DOCTYPE html>
<head>
<title>Website Bram</title>
<link href="shoop.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>Bram Heesen</header>
<nav>
<ul>
<li>
<a class="huidig_blauw" href="startpagina.html">HOME</a>
<a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a>
<a class="huidig_rood" href="paginamijzelf.html">Over Mij</a>
<a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a>
</li>
</ul>
</nav>
<p>
<br><br>
<audio controls="controls"autoplay="autoplay">
<source src="music/chiptune.ogg" type="audio/ogg" />
<source src="music/chiptune.mp3" type="audio/mpeg" />
Sorry, je internetprogramma kan deze muziek niet laten horen.
</audio>
</p>
</body>
</html>
In the future you should provide your code directly in your post so that if someone stumbles upon your question at a later date, they can see the issue. If you link to your site and then fix your issue on the site, or the site is no longer up, the link becomes irrelevant to the question.
That said, you can center your menu elements by removing the float:left; and adding text-align:center; to the ul.
ul {
list-style-type: none;
padding: 0;
text-align: center;
}
Welcome to SO!
UPDATE USING OP's CODE
header {
color: GhostWhite;
text-align: center;
font-size: 60px;
margin: 0px;
font-family: courier new;
}
body {background-image: url("images/wallpapermain.jpg");
color: white;
}
p { border-width: 3px;
border-style: groove;
border-color: light-blue;
background-color: black;
border-radius: 10px;
height: 1200px;
width: 1000px;
text-align: center;
font-family: "verdana";
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 50px;
}
img {border-radius:10px;
}
a:link.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:visited.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:hover.img { color: red;
text-decoration:underline;
font-weight:bold;
}
/* menu */
a:link,a:visited {
font-weight: bold;
color: white;
background-color: black;
border: 2px #033 ridge;
border-radius: 10px;
width: 140px;
text-align: center;
padding: 4px;
margin-bottom: 10px;
text-decoration: none;
}
a:hover,a:active {
background-color: dark-grey;
color: orange;
width: 140px;
}
nav {
height: 30px;
padding-top: 0px;
}
ul {
margin:0;
list-style-type: none;
padding: 0;
text-align: center;
}
nav{
text-attachment: fixed;
}
a.huidig_blauw {
background-color: white;
color: black;
}
a.huidig_rood {
background-color: green;
color: black;
width: auto;
}
a.tweede_menu {
background-color: red;
color: blue;
width: auto;
}
/* CSS Document */
<header>Bram Heesen</header>
<nav>
<ul>
<li>
<a class="huidig_blauw" href="startpagina.html">HOME</a>
<a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a>
<a class="huidig_rood" href="paginamijzelf.html">Over Mij</a>
<a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a>
</li>
</ul>
</nav>
<p>
<br><br>
<audio controls="controls"autoplay="autoplay" >
<source src="music/chiptune.ogg" type="audio/ogg" />
<source src="music/chiptune.mp3" type="audio/mpeg" />
Sorry, je internetprogramma kan deze muziek niet laten horen.
</audio>
</p>
I want to add a border to my tab content. There should be no border at the bottom of the selected tab. I found this questions: how to give a border to bootstrap tab contents, but the answers didn't work for me?
HTML:
<ul class="nav nav-tabs pull-right">
<li><a data-toggle="tab" href="#sub_cats_8">תתי קטגוריות</a></li>
<li class="active"><a data-toggle="tab" href="#category_8">קטגוריה</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content" style="height: 100%;">
<div id="category_8" class="tab-pane fade in active category" style="background-image: url('example.jpg');">
<h1> קוסמטיקה </h1>
</div>
<div id="sub_cats_8" class="tab-pane fade">
<ul class="sub_categories">
<li>איפור</li>
</ul>
</div>
</div>
CSS:
body, html {
direction: rtl;
height: 100%;
font-family: Tahoma;
}
.nav-tabs {
direction: ltr;
}
#logo {
background-color: #005CB8;
width: 100%;
color: white;
padding: 4% 10%;
-webkit-box-shadow: 20px 10px 20px #003972;
-moz-box-shadow: 20px 10px 20px #003972;
box-shadow: 20px 10px 20px #003972;
border-bottom-left-radius: 50px;
}
#logo h1, #logo h4 {
display: inline;
font-family: head;
}
#logo h1 {
font-size: 550%;
}
#logo h4 {
font-size: 220%;
}
.navbar-inverse {
background-color: #477199;
font-weight: bold;
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.nav.navbar-nav li a {
color: white;
}
.navbar-inverse .navbar-nav > .active {
background-color: #003972;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
color: white;
background: #003972;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
background-color: #324F6B;
color: white;
}
.category {
text-align: center;
margin-top: 1px;
background-size: 100% 100%;
padding: 15% 0;
}
.category h1 {
color: white;
font-family: head;
font-size: 500%;
text-shadow: 2px -2px black;
}
.category_start {
margin: 0 auto;
width: 85%;
}
.sub_categories {
-webkit-columns: auto 3;
/* Chrome, Safari, Opera */
-moz-columns: auto 3;
/* Firefox */
columns: auto 3;
list-style-type: disc;
margin-top: 5px;
}
.category_start .container {
margin-top: 10px;
}
.product_image {
height: 80px;
width: 80px;
}
.products_sub_list {
margin: 10px auto 0;
text-align: center;
max-width: 80%;
border-radius: 7px;
}
.products_sub_list td {
width: 15%;
max-width: 15%;
padding: 0 5px;
border: 3px solid #46617A;
}
.product {
width: 80%;
border: 3px solid #46617A;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
.product_table td {
border: 2px solid #46617A;
padding: 13px;
}
.product_table {
display: inline-table;
margin-left: 15px;
margin-bottom: 8px;
}
.product_table td:first-child {
font-weight: bold;
}
.page {
width: 85%;
margin: 0 auto;
padding: 15px 25px;
border: 2px solid #46617A;
border-radius: 10px;
background-color: #C8D0D7;
}
.register {
margin: 0 auto;
width: 80%;
text-align: center;
}
.register td {
padding: 5px;
text-align: right;
}
.register table {
margin-right: 240px;
}
#register {
width: 80%;
position: absolute;
z-index: 2;
display: none;
left: 0;
right: 0;
top: 100px;
margin: 0 auto;
border: 3px solid #0066FF;
background-color: #CCE0FF;
text-align:center;
border-radius: 10px;
}
#bbg {
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.8;
filter: alpha(opacity=80);
}
.tab-content {
border: 1px solid #ddd;
padding: 1px;
}
JSFiddle: http://jsfiddle.net/ep2drocb/7/
Notice there is border in the open tab, also the closed tabs have a double border.
The main problem is the pull-right on the ul element.
Remove pull-right class from the ul
Remove the clear-fix element as it's not needed anymore
Remove top border from your tab-content class
Float the lis right
Correct the margins on the tab anchors
Relevant HTML:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#category_8">תתי קטגוריות</a></li>
<li><a data-toggle="tab" href="#sub_cats_8">קטגוריה</a></li>
</ul>
<div class="tab-content">
<div id="category_8" class="tab-pane fade in active category">
<h1> קוסמטיקה </h1>
</div>
<div id="sub_cats_8" class="tab-pane fade">
<ul class="sub_categories">
<li>איפור</li>
</ul>
</div>
</div>
Relevant CSS:
.tab-content {
border: 1px solid #ddd;
border-width: 0 1px 1px; /* Removes the top border */
padding: 1px;
}
.nav-tabs > li {
float: right;
}
.nav-tabs > li > a {
margin-right: 0;
margin-left: 2px;
}
JSFiddle: http://jsfiddle.net/ep2drocb/9/
That should get you on the right track.
I added an Iframe to a page and it pushed my sidebar down. I tried different ways to float it, but I'm still stuck. Any help would be appreciated. Here's the HTML and CSS for the page:
http://lkwalker.com/writing.html
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>LK Walker</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<header>
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><a href="index.html">Lauren K. Walker
<p><span class="logo_colour"> | Teacher | </span> <span class="logo_colour">Writer | </span></span> <span class="logo_colour">Yogi | </span></a></h1></p>
</div>
</div>
<nav>
<ul class="sf-menu" id="nav">
<li>About</li>
<li>Schedule
<ul>
<li>Retreats</li>
<li>Privates</li>
</ul>
<li>Energy Medicine Yoga</li>
<li>Military</li>
<li>Writing
<ul>
<li>Social Media</li>
<li>Theatre</li>
</ul>
<li>Contact</li>
</nav>
</header>
<div id="site_content">
<div id="top_border"></div>
<ul id="images">
<li><img src="images/lkwalker.jpg" width="600" height="300" alt="LK Walker" /></li>
<li><img src="images/navasana.jpg" width="600" height="300" alt="Navasana" /></li>
<li><img src="images/donna.jpg" width="600" height="300" alt="Donna Eden" /></li>
<li><img src="images/tree.jpg" width="600" height="300" alt="Tree" /></li>
<li><img src="images/raven.jpg" width="600" height="300" alt="Birding" /></li>
<li><img src="images/yogacow.jpg" width="600" height="300" alt="Cow Pose" /></li>
</ul>
<div class="content">
<h1>Articles</h1>
<iframe width="500" height="400" align="left" src ="http://lkwalkerwriting.blogspot.com/" width="500" height="500">
<p>Your browser does not support iframes.</p>
</iframe><br />
<ul>
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
<div id="sidebar_container">
<img class="paperclip" src="images/paperclip.png" alt="paperclip" />
<div class="sidebar">
<h4><p>Check out our newest clothing partner, MahaDevi, use code EMYoga to get a 15% discount.</p>
<p><em>Like us on FaceBook - Follow us on Twitter</em><!-- START SOCIAL MEDIA WIDGET --><ul id="socialbar"><li id="facebook"><a target="_blank" href="htp://www.facebook.com/EnergyMedicineYoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png"></a></li><li id="twitter"><a target="_blank" href="http://twitter.com/energymedyoga"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png"></a></li></ul><style>#socialbar img {border:0px;}#socialbar li img {width:48px; height:48px;}#socialbar li a:hover {position:relative;top:2px;}#socialbar{padding:0px;list-style: none outside none; margin:0px; position: static;}#socialbar li {display:inline;padding-right:2px;}#socialbar{width:180px;text-align:center;}</style><!-- END SOCIAL MEDIA WIDGET --></p>
</div>
</div>
</div>
<footer>
<p>Copyright © Energy Medicine Yoga| Whitefish, MT | Contact Us |</p>
</footer>
</div>
<p> </p>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#images').kwicks({
max : 600,
spacing : 2
});
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: Jacques Francois, times, serif;
src: url('../fonts/Jacques Francois.otf');
src: local("Jacques Francois"), url('../fonts/Jacques Francois.otf');
}
#font-face {
font-family: lilly, arial, sans-serif;
src: url('../fonts/lilly.ttf');
src: local("lilly"), url('../fonts/lilly.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .80em 'lilly', sans-serif;
background: #cab0cb;
color: #444;
height: 100%;
width: 1000px;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Jacques Francois', serif;
letter-spacing: 0em;
padding: 0 0 5px 0;
text-align: center;
}
h1, h2, h3 {
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
color: #04662e;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #615044;
padding: 0 0 5px 0;
font-family: normal 160% 'Jacques Francois', serif;
font: bold 145% times, serif;
}
h5, h6 {
color: #615044;
font: italic 95% times, serif;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #B30303;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
clear: both;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, nav, #container, #logo, #site_content, footer
{
margin-left: auto;
margin-right: auto;
}
#main {
margin: 5px auto;
width: 940px;
background: transparent;
padding-bottom: 30px;
}
header {
background: transparent;
height: 130px;
}
#logo {
width: 940px;
height: 140px;
background: transparent;
color: #888;
padding: 0;
float: left;
border-bottom: 1px solid #AFABAB;}
#logo h1, #logo h2 {
font-family: normal 320% 'Jacques Francois', times, serif;
border-bottom: 0;
text-transform: none;
margin: 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 0;
color: #331d59;
text-decoration: none;
font-size: 48px;
}
#logo_text h1 a .logo_colour {
color: #2c89b3;
}
#logo_text a:hover .logo_colour {
color: #2c89b3;
}
#logo_text h2 {
font-size: 140%;
padding: 0 0 0 0;
color: #04662e;
}
nav {
height: 44px;
float: right;
text-align: center;
margin-left: auto;
margin-right: auto;
width:90%;
padding: 10px 10px;
color: #222;
border-top: 2px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
width: 100%;
}
iframe
{
width: 60%;
clear: both;
}
#site_content {
width: 940px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #AFABAB;
}
#top_border {
border-top: 1px solid #fff;
padding-top: 20px;}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 30%;
margin: 0 0 0 0;
}
.sidebar {
float: right;
vertical-align: top;
width: 180px;
margin: 0 0 17px 0;
background: #EFF8FB;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
padding: 0 15px 5px 13px;
}
.sidebar h3, .content h1 {
padding: 0 15px 20px 0;
font: 230% 'Days', arial, sans-serif;
font-style: bold;
text-shadow: #FFF 1px 1px;
margin: 0 1px;
color: #444;
}
.sidebar h3 {
color: #444;
font: 250% 'Lilly', arial, sans-serif;
padding: 0 15px 5px 0;
}
.sidebar ul {
margin: 0 0 15px 0;
}
.sidebar li a, .sidebar li a:hover {
color: #555;
text-decoration: none;
}
.sidebar li a:hover {
text-decoration: underline;
}
.sidebar_item, .content_item {
padding: 15px 0;
}
.paperclip {
position: relative;
z-index: 0;
vertical-align: middle;
margin: -15px 0 -60px -40px;
}
.content {
text-align: left;
width: 670px;
margin: 25px 0 0 0;
float: left;
font-size: 120%;
}
.content ul {
margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li {
list-style-type: none;
background: url(../images/bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 28px;
line-height: 1.5em;
}
footer {
width: 940px;
clear: both;
font: 170% 'Lilly', arial, sans-serif;
height: 30px;
padding: 20px 0 20px 0;
float: left;
text-align: center;
border-top: 10px solid #eeeeee;
}
footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
color: #000;
}
footer a {
color: #000;
text-decoration: 1px 1px #FFF;
}
footer a:hover {
color: #000;
text-shadow: none;
text-decoration: underline;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #D5D5D5;
background: #FFF;
color: #47433F;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
.form_settings .submit {
font: 140% 'Days', arial, sans-serif;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #ddd; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #ddd;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
color: #222;
text-shadow: 1px 1px #FFF;
}
.form_settings textarea, .form_settings select {
font: 100% arial;
width: 299px;
}
.form_settings select {
width: 310px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #BBB;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #DDD;
color: #444;
border-top: 1px solid #FFF;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
list-style: none;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
}
/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
**/
/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 200px;
}
html body ul.sf-menu ul ul {
margin: 0 0 0 200px;
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;
}
ul.sf-menu {
display: block;
position: relative;
}
ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;
}
ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
ul.sf-menu a {
display: block;
position: relative;
}
ul.sf-menu ul {
position: absolute;
width:70%;
top: auto;
}
ul.sf-menu ul a {
zoom: 1; /* IE6/7 fix */
}
ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 150px;
}
ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
background: url(../images/arrows-black.png) no-repeat 0 0;
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size: 1px;
}
ul ul span.sf-arrow {
right: 5px;
top: 20px;
background-position: 0 100%;
}
/* Theming the menu */
ul#nav {
float: left;
}
ul#nav ul {
background: #ddd;
margin-top: 5px;
padding-bottom: 15px;
}
ul#nav li a {
padding: 7px 18px 6px 18px;
font: 150% 'Lilly', arial, sans-serif;
text-decoration: none;
color: #000;
margin-right: 2px;
}
ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {
color: #000;
text-shadow: 1px 1px #fff;
}
ul#nav ul li a {
color: #000;
}
ul#nav ul li a:hover {
color: #B30303;
margin-right: 2px;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
list-style: none;
}
#sidebar_container {
float: right;
vertical-align: top;
display: inline;
width: 200px;
margin: 0 0 0 0;
position: relative;
bottom: 536px;
left: 269px;
}
Add these lines to your sidebar_container id and try!!
Also you had added an iframe and this side_bar class in a single main div, and haven't specified their positions.
The issue is because of </div> closing.
Cut and paste the entire sidebar container after closing of </div>
Now
<div id="content">
bla bla bla
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
</div> <!-- closing content -->
Change it to
<div id="content">
bla bla bla
</div> <!-- closing content -->
<div id="sidebar-container">
bla bla bla
</div> <!-- closing sidebar -->
Your issue not with iframe it is causing because of UL
Its taking its space you left content in div like
<div class="left_container">
<!-left content-->
<iframe width="65%" height="400" align="left" src="http://lkwalkerwriting.blogspot.com/">
&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
</iframe><br>
<ul style="
/* width: 108px; */
/* float: left; */
clear: both;
">
<li><a href="http://www.nytimes.com/2012/04/15/education/edlife/upward-facing-soldier.html?smid=pl-share"> New York Times -
Upward Facing Soldier </a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/do-you-have-to-be-skinny-to-do-yoga">Mother Nature News -
Do you need to be Skinny to do Yoga?</a></li>
<li><a href="http://www.mnn.com/health/fitness-well-being/stories/what-is-energy-medicine-yoga"> Mother Nature News -
What is Energy Medicine Yoga?</a></li>
</ul>
</div>
<div class="sidebar_container">
<!--sidebar content-->
</div>
CSS:
.left_container
{
width: 69%;
float: left;
}
remain css is same as yours thanks.
This is a messy fix but should resolve the issue for the moment. If you make these changes in your css it should all line up. I used Firebug on firefox to test it and it worked just fine.
.content {
float: left;
font-size: 120%;
margin: 25px 0 0;
text-align: left;
width: 940px;
}
.content ul {
float: left;
margin: 2px 0 22px;
}
sidebar {
background: none repeat scroll 0 0 #EFF8FB;
border-radius: 7px;
display: inline;
float: right;
margin: -450px 0 17px;
padding: 0 15px 5px 13px;
vertical-align: top;
width: 180px;
}
I would not suggest this is a permanent solution but it should help in the meantime