I'm just trying to make my website layout. Now I have a problem: right navigation div stays under the Left navigation one. The blue one should be in the same line as the green.
Any suggestions?
I was following this tutorial: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P6/ and done the same, but it doesn't work as it should be.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -->
<html>
<head>
<!-- Svetaines dizainas -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="topmenu">TOPMENU</div>
<div id="topheader">TOP HEADER</div>
<div id="lnav">Left Navigation<div>
<div id="rnav">Right Navigation</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
CSS:
body, h1
{
margin:0;
padding:0;
}
#container
{
width:1024px;
margin:auto;
}
#topmenu
{
width: 1024px;
background-color:red;
height:53px;
}
#topheader
{
width:1024px;
height:170px;
background-color:orange;
}
#lnav
{
width:1024px;
background-color:green;
}
#rnav
{
width:373px;
float:right;
background-color:blue;
}
#footer
{
width:1024px;
height:190px;
background-color:pink;
}
#lnav
{
width:1024px;
background-color:green;
}
This shouldn't be 1024 right?
Change it to 651px (from my head) to make it fit.
You could ofcourse put it inside the leftmenu and float it right aswell, (make sure the html of right would be above the content of left). But I wouldn't recommend this.
Arghh my own silly mistake:
<div id="lnav">Left Navigation<div>
I think you can understand what's wrong :D
Related
I want the following layout in my page:
The header and footer are always visible. The gray area is an article tag. The green and dark red areas are both inside a nav tag. The dark red has a fixed width, and is going to be used as a handle to resize the green navigation panel (it will be very narrow, of course, and I'll use JavaScript for the resizing). Both the gray and green areas must have their own scrollbars.
That's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>CSS template</title>
</head>
<body>
<header>Header</header>
<main>
<nav>
<div class='navcont'>
<p>nav1</p>
<p>nav2 with longer line just to make sure if everything is working as intended</p>
</div>
<div class='handle'>Handle</div>
</nav>
<article>
<p>Article</p>
</article>
</main>
<footer>Footer</footer>
</body>
</html>
That's the CSS:
html, body {
height:100%;
margin:0;
}
body {
display:flex;
flex-direction:column;
}
header {
text-align:center;
}
main {
flex:1;
display:flex;
min-height:0;
}
article {
background:#C0C0C0;
width:80%;
overflow:auto;
padding:10px;
}
nav {
width:20%;
height:auto;
overflow:hidden;
}
.navcont {
background:#00FF00;
width:auto;
}
.handle {
background:#800000;
float:right;
width:30px;
}
footer {
text-align:center;
}
And a running example: https://jsfiddle.net/etwphhc8/
I tried many different solutions, from many different questions/answers here, but still haven't make it work as intended. So, how can I achieve the wanted layout using CSS?
Add flex with the direction set to row in nav:
nav {
width:20%;
height:auto;
overflow:hidden;
display:flex;
}
Try to write:
.navcont {
background:#00FF00;
width:auto;
height: 100%;
}
I am making an HTML website's index page now, and I don't know why this CSS isn't working. My CSS code is as follows, and my HTML code after that:
body {
background-image:url("background.png");
font-family:sans-serif;
}
#content {
margin:0 auto;
overflow:auto;
background-color:white;
border-radius:10px;
width:60%;
}
.header {
margin:10px;
}
.body {
margin:10px;
}
.footer {
margin:10px;
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="content">
<div id="header">
<p>This is the header!</p>
</div>
<div id="body">
<p>This is the body!</p>
</div>
<div id="footer">
<p>This is the footer!</p>
</div>
</div>
</body>
</html>
So, what ends up happening is that overflow: auto is not setting the side margins, but it is successfully setting the top and bottom margins. Thanks in advance.
By the way, all of the images are also in the directory, and they are working fine.
You're using class selectors in your CSS and id attributes in your HTML.
Either change your CSS to #header, #body, and #footer.
Or, change your HTML to class="header", class="body", and class="footer".
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
I have a website in which the layout look something like the following:
The css for the main content is as follows:
.home {margin:178px 0 0 100px;width:800px;padding:0 10px 0px 10px;float:left;height:auto!important;height:310px;min-height:310px;}
The problem is whenver I resize the browser, the main content div instead of staying there and the browser getting horizontal scrollbars
moves down automatically.
If I resize the browser back to its original size, the main div doesn't even come back to its original place. How do I correct this thing?
Add the two elements (left,right) inside a container div, and give this container a min-width
<head>
<style type="text/css">
body {
min-width:750px;
min-height:500px;
}
div.container {
min-width:600px;
min-height:450px;
}
div.left, div.right {
min-height:400px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
This is two column full screen layout with colorized column background (if necessary) & jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-color:#ccc;
}
#header {
background-color:#ccf;
}
#container {
position:relative;
min-height:80%;
border:4px solid red;
overflow:hidden;
}
#left {
float:left;
width:200px;
background-color:#cfc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#main {
position:relative;
margin-left:200px;
background-color:#ffc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#footer {
background-color:#fcc;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="container">
<div id="left">LEFT</div>
<div id="main">MAIN</div>
<div style="clear:both"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
I am trying to create a web page using CSS (Table less) but my main content area is not extending with contents please check my html and css codes and give me a solutions, Thanks
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>::Model::</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Css code
body{
margin:0px;
padding:0px;
height:auto;
}
#wrapper{
margin:0px auto;
width:1000px;
}
#header{
height:50px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#main{
height:auto;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#footer{
height:100px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#left{
border:#CCCCCC solid 1px;
width:640px;
padding:4px;
float:left;
margin-right:2px;
}
#right{
float:right;
padding:4px;
border:#CCCCCC solid 1px;
width:320px;
}
Thanks again
Just apply overflow:auto; on #main to make it wrap its floating children.
Take a look on Floating image to the left changes container div's height
(You can remove its height rule)
You have floated elements in your document, which as the name suggests means they float above your 'main' div. Hence it isnt extending.
Easy to fix however, you just need to stick a 'clear' in.
your html should look like this, notice the extra div.
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clearme"></div>
</div>
And simply add the following to your css.
.clearme{clear:both}
More can be found on the clear property and its usage here: http://www.tutorialhero.com/tutorial-64-css_clear_property.php