On the following jsfiddle:
http://jsfiddle.net/oshirowanen/4fgkj/
Here is a snippet of the HTML as it would have been too much HTML to post up here if I posted the whole thing:
<div id="main">
<div class="inner">
<ul class="column">
<li class="one">
<ul>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
</ul>
</li>
<li class="two">
<ul>
<li class="main_content">
<p>content goes here</p>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
You will see that I have a menu and some content. The problem is that I don't want the content to wrap around the menu.
How do I stop that from happening?
First of all, don't use li for content, it's only used for displaying lists (such as menus).
Second - to answer your question - a structure like this might do what you want, and is quite regularly used:
HTML:
<div class="wrapper">
<div class="header">
header
</div>
<div class="wrapright">
<div class="right">
right
</div>
</div>
<div class="left">
left
</div>
<div class="footer">
footer
</div>
</div>
CSS:
.wrapper{
width: 90%;
margin: 0 auto;
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.wrapright{
float: left;
width: 100%;
background-color: #cfcfcf
}
.right{
margin-left: 220px;
background-color: #afeeee;
height: 200px;
}
.left{
float: left;
width: 200px;
margin-left: -100%;
background-color: #98fb98;
height: 200px;
}
.footer{
float: left;
width: 100%;
background-color: #f4f4f4;
}
body {
padding: 0px;
margin: 0px;
}
LIVE DEMO
Of course, you'll have to adjust the CSS to change background colour, padding,... and the HTML to adjust the content. But I think you'll be able to figure that out.
Well, don't tell it to wrap around... in :
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
}
just remove the line
float:left;
You have to set min-height to your css rules (#main .column .one). If you set it, your content will be right the menu, but will not be wrapped around it.
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
min-height:600px;
}
All you need to do is add this to your styles:
.main_content {overflow: hidden;}
However, I must say, using a ul for page layout like that is not a good idea. Semantically, your page content is not an unordered list.
Related
I have a menu in the top of my website with this css:
.menu {
width: 100%;
display: block;
float: left;
}
inside of it, I have few divs:
.menu .menu-item {
position: relative;
width: 260px;
float: left;
height: 430px;
}
This is all good, but when I try to add a small div underneath the menu, with this HTML structure:
<div class="menu">
<div class="menu-item">
</div>
</div>
<div class="menu-bar">
</div>
and this css:
.menu-save {
position: relative;
display: block;
margin: 0 auto;
width: 100%
height: 20px;
}
With this CSS my expected output is that the menu-bar div goes underneath the whole menu, but what I'm currently getting is that menu-bar sits inside of menu, at the top of it. What CSS am I missing?
I think
use clear: both CSS property to avoid the floating problem
<div class="menu">
<div class="menu-item">
</div>
</div>
<div class="clear"></div>
<div class="menu-bar">
In Css add this one
.clear{
clear:both;
}
I have written this code,all the divs are working properly also the nav is. But the black color of the "header" does not seem to work. I have posted the whole code below.Please have a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
background-color: black;
margin: 0px;
}
#logo
{
background-color: green;
}
#headTable
{
float:right;
}
#logo
{
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
color: black;
float: left;
margin: 10px 50px;
}
#nav
{
clear: both;
width:100%;
height: 100px;
background-color: purple;
}
#nav ul
{
margin-left: 100px;
padding: 0;
}
#nav ul li
{
display: block;
margin: 10px;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Others</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
Add overflow:auto to #header:
#header {
background-color: black;
margin: 0px;
overflow:auto;
}
jsFiddle example
Floating the content makes the parent act as if there's no content and it collapses. Adding the overflow rules restores the behavior you seek.
Because #header in this context has no defined size because the only elements it contains have floats.
Three easy ways around this:
Explicitly define dimensions for #header.
Add display:inline-block to #header.
Use a clearfix after the two floated elements in #header. This is done most commonly by using <div style="clear:both;"><!-- --></div>
you must put some "Height" to you #header tag in CSS. Good Luck !
I created a jsfiddle : http://jsfiddle.net/JsA7y/.
So , of course I might have the same "problem" as you ;
the img src point nowhere (in the jsfiddle).
? Where does your img point to ?
? Is the img in the same directory as your html ?
=> Other wise , you will need to use the correct uri ;
such as , if the img is in a directory at the same level as the html :
<img src="directory/plane.jpg" width="150" height="100">
...
Hope this helps.
I can't figure out how to get the "This is the header" div's text to move down without effecting the rest of the page. When I add padding-top to the header div, it increases the entire div's size. That's not what I want. I just want to move the text down to the middle of the div.
<body>
<div id="container">
<div id="name">
<h1>Byron Woodfork</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</div><!--ends nav div-->
<div id="header">
<p>This is the header</p>
</div><!--ends header div-->
#nav {
float: right;
width: 400px;
height: 60px;
background-color: #07f50b;
}
#name {
width: 560px;
height: 60px;
float: left;
background-color: #06f706;
}
#header {
width: auto;
height: 500px;
background-color: #282e34;
}
One easy way is to set the line-height of your header div to have the same height as the div itself (so line-height: 500px). This doesn't work as nice if your text takes up more than one line, though.
I am currently building a website and require my footer to stick to the bottom of the page - I am struggling somewhat - beneath is an example of my HTML and my CSS - I need the footer to stay at the bottom if the page is small but grow with the page if it gets bigger.
HTML:
<div class="container">
<div class="main">
<!-- some content -->
</div>
</div>
<div class="clear"></div>
<div id="footer">
<div class="container">
<div class="footer_nav">
<h4>Site Map</h4>
<ul>
<li>Home</li>
<li>Example Page 1</li>
<li>Example Page 2</li>
<li>Example Page 3</li>
<li>Contact</li>
</ul>
</div>
<div class="footer_copy">
<p>©<?php echo date('Y');?> Oliver Fletcher<br/>
All Rights Reserved</p>
<h4>Where I learnt...</h4>
<img src="images/accreditations.jpg" alt="Team Treehouse">
</div>
<div class="footer_social">
<img src="images/twitter.png" alt="Twitter">
<img src="images/facebook.png" alt="Facebook">
<img src="images/linkedin.png" alt="LinkedIn">
<img src="images/google.png" alt="Google">
<h4>Get in touch</h4>
oli#thewebshare.co.uk
</div>
</div>
<div class="clear"></div>
</div>
</body>
CSS
html{
height: 100%;
}
.container{
width: 980px;
margin: auto;
min-height: 100%;
_height: 100%;
}
.main{
margin-bottom: -183px;
position: relative;
}
#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: relative;
padding: 20px 0;
height: 183px;
}
#footer{
width: 100%;
background-image: url('../images/nav_bg.png');
color: white;
font-weight: lighter;
position: fixed;
bottom:0px;
padding: 20px 0;
height: 183px;
}
Use position:fixed and bottom:0px
One problem I see is the duplicate use of the container class. You should have the container for the content and the container for the footer using separate class names, or you could use the css selector
body > .container
Otherwise, I'd try to switch the css for the .main to have the css rules below. The height and padding needs to be a equal fixed size.
.main
padding-bottom: 100px;
.footer
height: 100px; // FIXED HEIGHT IS IMPORTANT
There's a lot of examples of this on the internet. I used this one and found that it worked well. Hope this helped.
What you want is assign CSS elements to .clear under your #container and above your #footer. You want it essentially push the footer down so it sticks to the bottom.
This tutorial helped me, the whole page is dedicated to a sticky footer.
Sticky Footer Tutorial
Obviously there are many methods to this. Following this tutorial will do the trick as well:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
I am trying to make a div that contains other floating divs to adjust its width such that adding more floating divs (dynamically using jQuery) will only expand the div in its width, not allowing the floating divs to create a new line. Therefore, I want to fix this issue such that each div with class grid-row only expands in width, and so I will be able to scroll using the overflow: scroll for the parent grid div. I have searched a lot for answers, and it seems that it is a famous issue. However, non of the answer solved my problem.
I am currently doing this:
<div id="grid_container">
<div id="grid">
<div class="grid_row">
<div class="module" id="experience">
Experience
</div>
<div class="header">
Google
</div>
<div class="header">
Microsoft
</div>
</div>
<div class="grid_row">
</div>
</div>
</div>
CSS:
body {
}
#grid_container {
margin: 50px auto;
width: 500px;
height: 500px;
padding: 10px;
border: black solid 1px;
}
#grid {
overflow:scroll;
height: 100%;
}
.grid_row {
clear: both;
height: 50px;
}
.module, .header{
padding: 10px;
float: left;
border: gray solid 1px;
}
You can achieve this by making the row container float and have the style "white-space: nowrap;"
http://jsfiddle.net/UeNZr/3/
EDIT
An alternative is to make each item display inline and make each grid element float. http://jsfiddle.net/UeNZr/5/.
If you're making a list, consider using the more semantic ul.
Demo
HTML:
<ul class="grid">
<li>
<ul>
<li>One Mississippi</li>
<li>Two Mississippi</li>
<li>Three Mississippi</li>
<li>Four Mississippi</li>
<li>Five Mississippi</li>
<li>Six Mississippi</li>
</ul>
</li>
<li>
<ul>
...
</ul>
</li>
<li>
<ul>
...
</ul>
</li>
</ul>
CSS:
.grid ul{
margin:10px 0;
height:42px;
width:100%;
overflow-x:scroll;
background:white;
white-space:nowrap;
}
.grid li li {
list-style-type:none;
display:inline-block;
padding:10px;
border:1px solid gray;
height:20px;
}