I have a CSS file, mastercss4.css:
#content {
width: 1000px;
height: 800px;
background-color: #b0c4de;
margin-left: auto;
margin-right: auto;
}
#top {
width: 1000px;
height: 141px;
background-color: red;
}
#topleft {
width: 193px;
height: 141px;
background-color: yellow;
float: left;
}
#topmid {
width: 15px;
height: 141px;
background-color: green;
float: left;
}
#topright {
width: 797px;
height: 141px;
background-color: cyan;
float: left;
}
#middle {
width: 1000px;
height: 598px;
background-color: white;
float: clear;
}
#midleft {
width: 188px;
height: 598px;
background-color: aquamarine;
float: left;
}
#midmid {
width: 15px;
height: 598px;
background-color: orange;
float: left;
}
#midright {
width: 797px;
height: 598px;
background-color: blueviolet;
float: left;
}
#bottom {
width: 1000px;
height: 61px;
background-color: blue;
float: clear;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000000;
}
I have an HTML file, default09.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="test">
<meta name="author" content="Algomeysa">
<title>test</title>
<link rel="stylesheet" href="mastercss4.css">
</head>
<body>
<div id="content">
<div id="top">
<div id="topleft">tl</div>
<div id="topmid"></div>
<div id="topright">tr</div>
</div>
<div id="middle">
<div id="midleft">ml</div>
<div id="midmid"></div>
<div id="midright">mr</div>
</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
what should result is the Red, White, and Blue bars completely overwritten
Top row: Yellow box, thin Green section, Cyan box
Middle row: Aquamarine box, thin Orange section, Blueviolet box
Bottom row: Blue box
What happens instead is the top right cyan box gets dropped down to the middle left, and everything else is staggered.
Can anyone spot what I'm doing wrong?
set topright width to 792px. You have 5 more pixels than your parent container width:
#topright{
width: 792px;
}
clear is not a valid value for the float property. left, right, none, initial and inherit are the only valid values for float.
clear itself is a css property and accepts left, right, both, none, initial or inherit.
It looks like you have a couple of instances of float: clear; in your code. Change those to something like clear: both; and you should be fine.
make it simple just change
float:none
to #topright
and reduce the width of topright as rquired
Related
I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)
<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style type="text/css">
#white{
color:white;
}
.large {
font-size:300%;
}
#green {
color:black;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.picture{
position: absolute;
top: 45px;
right: 0;
width: 1870px;
height: 10px;
}
.greybox {
background-color:#a5a5a5;
position: absolute;
top: 380px;
right: 0;
width: 1870px;
height: 10px;
border: 3px solid #a5a5a5;
}
.connect {
background-color:#6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.top {
top:10px;
width: 1870px;
height:700px;
z-index:2;
text-align: center;
}
.bottom {
background-color:#0a0a0a;
width: 1600px;
height:200px;
text-align: center;
}
.purplebox {
background-color:#6b6b6b;
position: absolute;
top: 0px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.greenbox {
top:0px;
width: 1870px;
height: 500px;
z-index:2;
text-align: center;
margin:150px 100px 30px 10px;
float:center;
font-family: 'Oswald', sans-serif;
}
}
p {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="greybox">
</div>
<div class="purplebox">
<p class="large"></p>
</div>
<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870">
</div>
<div class="connect">
<p> Connect with me! </p>
</div>
<div class="top">
<p id="green" class="large">idfk</p>
</div>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="bottom">
<p id="white" class="large">Connect With me!</p>
</div>
By default the body on the page has this css:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
at the top of your css file just add:
body {
margin:0;
}
this way you're working with 0 margins to begin with.
Margins of <body> don't matter because those grey bars are absolutely positioned to the right therefore they stick to the right side of <html> element. If the screen resolution (the width of your screen or window) is bigger then the width: 1870px;, they are gonna stick to the right side and leave an empty space on the left.
If you want those grey boxes to always stick to both sides of your screen, use width: 100%; or no width and left: 0; instead:
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 100%;
height: 40px;
border: 3px solid #6b6b6b;
}
or
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
left: 0;
height: 40px;
border: 3px solid #6b6b6b;
}
Both will stretch the element to the width of their parent element.
But it is good to set the body's position to relative and get rid of its default margins. In my opinion, you shouldn't use the <html> tag for styling. It will make those absolutely positioned grey boxes stick to the sides of <body> and not <html>:
body {
margin: 0;
position: relative;
}
See this link to learn more about positioning: http://www.w3schools.com/css/css_positioning.asp
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
I'm working on a brand new website and I'm trying to just get the basic layout going. I am using the ASP.NET MVC 4 generated HTML and I would like to get the DIV named body to fill the available space after making room for the header and thus anchoring the footer to the bottom of the browser window. However, what I'm getting right now is three panels just stacked on top of each other.
I would like a solution that would work if the browser supported HTML5 and one if it didn't
Please note I've inlined comments in the CSS to try and explain what I've tried.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("Title", "Index", "Home")</p>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - ACME. All rights reserved.</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
</body>
</html>
CSS
body {
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF THE BODY ITSELF WOULD SPAN */
/* WITH NO OTHER CSS APPLIED TO THE body ELEMENT */
/*height: fill-available;*/
/*height: 100%*/
}
/* general layout
----------------------------------------------------------*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
/* I'VE TRIED BOTH OF THE FOLLOWING TO SEE IF I COULD GET THIS ELEMENT TO SPAN */
/* WITHOUT ANY OTHER CSS APPLIED TO THE body TAG */
/*height: fill-available;*/
/*height: 100%*/
}
.main-content {
/*background: url("../Images/accent.png") no-repeat;*/
padding-left: 10px;
padding-top: 30px;
}
.featured + .main-content {
/*background: url("../Images/heroAccent.png") no-repeat;*/
}
footer {
clear: both;
background-color: #e2e2e2;
font-size: .8em;
height: 100px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 20px 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* social
----------------------------------------------------------*/
ul#social li {
display: inline;
list-style: none;
}
ul#social li a {
color: #999;
text-decoration: none;
}
a.facebook, a.twitter {
display: block;
float: left;
height: 24px;
padding-left: 17px;
text-indent: -9999px;
width: 16px;
}
a.facebook {
background: url("../Images/facebook.png") no-repeat;
}
a.twitter {
background: url("../Images/twitter.png") no-repeat;
}
Just snap the header and footer at the bottom of the page using fixed positioning.
header, footer{ position:fixed; left:0; right:0; z-index:1; }
header{ top:0; }
footer{ bottom:0; }
Then you can give your body the background your div#body had before. The div gets no background and will expand as much as needed.
div#body{ background:none; }
body{ background:#eee; }
This will look like the div would fill the remaining space of the page. Finally give your header and footer a background so that you can't see the background of the body under it.
header, footer{ background:#fff; }
By the way I would suggest removing body margins. body{ margin:0; }
I believe it's a bit impossible to do that with just CSS. You can make a webpage with 100% height like this:
html{
height: 100%;
}
body{
height: 100%;
}
#body{
height: 100%;
}
And then for header, body and footer you can do like this:
header{
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100%;
background-color: #f00;
}
#body{
bottom: 100px;
left: 0;
position: absolute;
right: 0;
top: 100px;
background-color: #fff;
}
footer{
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
background-color: #ff0;
}
It might work for a bit, but it'll break at some point. When you resize your browser, it'll be running out of room for your #body. If you want a better solution, you should use javascript. In your javascript, calculate how much space you have for your #body, then either adjust the height of header and footer. Or adjust the #body instead.
I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.
What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.
Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.
What is the trick to make the left and right div take up all the space within the content div?
The layout1.css is the original one. I just added two entries: #left and #right
layout1.css:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
background: gray;
font-family: arial, sans-serif;
font-size: small;
color: #666;
}
h1 {
font: 1.5em georgia, serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia, serif;
margin: 0 0 0.5em;
}
h1,h2,a {
color: orange;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
}
div#header p {
font-style: italic;
font-size: 1.1em;
margin: 0;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align: justify;
padding: 0 1em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
border-top: 6px double gray;
}
div#footer p {
padding: 1em;
margin: 0;
}
// added the following:
div#left {
border: 1px solid red;
width: 200px;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
div#right {
border: 1px solid blue;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
layout.html:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<div id="left">
left column
</div>
<div id="right">
right column
</div>
</div>
<div id="footer">
<p>
footer
</p>
</div>
</div>
</body>
Just in case somebody else stumbles onto this question like me. This is what I ended up doing.
<div class="left">
text
</div>
<div class="right">
text
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/
Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/
The way I usually do it is by using the float and padding properties.
HTML:
<div id="leftCol">
content
</div>
<div id = "rightCol">
content
</div>
CSS:
#leftCol {
width: 200px;
}
#rightCol {
width: 100%;
float: right;
padding-left: 200px;
}
Should work.
So you are using float, and padding to put the div's side by side.
You might need:
position: absolute;
top: 0px;
right: 0px;
in your #rightCol CSS style (Not tested btw... from memory)