Inside my div 'container' there appears to be a larger margin on the left side (larger indent) then there is on the right side. Anyone know why I'm getting this behavior? I have removed the ordered list items so there isn't excessive code to view. That shouldn't impact the question I have regarding the code documented below.
<html>
<head>
<title> Fantastic Hardware/Software Computer Package</title>
<style type="text/css">
body {
text-align:center;
}
ul li{
list-style:none;
}
#right{
float:right;
width: 400px;
}
#left {
float:left;
width: 400px;
}
#container {
align: center;
width: 1024px;
border-width:3px;
border-style:solid;
border-color:#00;
padding:50px;
margin:50px auto;
}
</style>
</head>
<body>
<h1 align="center">Custom Hardware/Software System</h1>
<div id="container">
<div id="left">
<ul>
<li></li>
</ul>
</div>
<div id="right">
<ul>
<li></li>
</ul>
</div>
</div>
</body>
</html>
As you can see in the picture, there is more space on the left than right.
Try this:
Use the below code in your CSS:
*
{
margin:0px;
padding:0px;
}
Hope this solves the problem..!
I create fiddle for your question please have a look on it.
`http://jsfiddle.net/8TS9a/`
Related
I have a web page layout. consists of three parts. the layout is pretty simple and works fine. The problem for small screen the header expands and covers the container beneath it. My question is, how to make the header container expands and in the same time do not cover the container beneath it? Please exclude the fixed height. for example (Height: 150px;). the height must be set to auto or any mode that makes it responsive.
here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="repeat.css">
</head>
<body>
<div class="header-container">
<div>
<ul class="left">
<li>home</li>
<li>menu</li>
<li>links</li>
<li>contacts</li>
</ul>
<ul class="right">
<li>home</li>
<li>menu</li>
<li>links</li>
<li>contacts</li>
</ul>
</div>
</div>
<div class="main-container">
<div class="left-column">
<div class="wrap">
</div>
</div>
<div class="main-column">
<div>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
<p> this part should not be covered when the header
container change its height </p>
</div>
</div>
</div>
</body>
</html>
The css code :
* {
margin: 0px;
padding: 0px;
}
.header-container{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background: #ccc;
box-sizing: border-box;
z-index: 10;
}
.left{
padding-left: 50px;
float:left;
}
.right{
padding-left: 300px;
float: left;
}
.main-container{
position:absolute;
margin-top: 80px;
left:0px;
width:100%;
height: calc(100% - 80px);
box-sizing: border-box;
background-color: pink;
z-index:1;
}
.left-column{
position:relative;
padding:0;
margin:0;
float:left;
width:20%;
height:100%;
background-color: #4db6ac;
}
.main-column{
position:relative;
padding:0;
margin:0;
float:left;
width:80%;
height:100%;
background-color: #00e5ff;
}
#media screen and (max-width:720px){
.header-container{
height: auto;
}
.left-column{
display:none;
}
.main-column{
width:100%;
}
}
I got the solution using the jQuery. The solution is posted by Marc Audet. You can find the solution following this link:
CSS, image with height:auto, covers div beneath it upon screen resize (phone held horizontally)
Please if any one has another solution using only css will be highly appreciated.
I want to show two divisions side by side. I have tried a few possible solutions, but they still overlap. Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Use float:left; Learn about CSS float Property
.sidebar
{
width:150px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:200px;
background:silver;
color:red;
padding:50px;
float:left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
float:left;
padding:50px;
}
.content
{
width:200px;
background:silver;
color:red;
float:left;
padding:50px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
I think do you mean just display two div in one row is it right so it is just simple add float:left in first div it will solve your issue.
Like :
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</body>
</html>
Just added main parent to both div and used display:inline-flex to it.
.main{
display:inline-flex;
}
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
}
<div class="main">
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
adding float:left to both div will fix the issue.
css code:
.sidebar
{
width:200px;
background:yellow;
color:orange;
padding:50px;
float:left;
}
.content
{
width:600px;
background:silver;
color:red;
padding:50px;
float:left;
}
html code:
<div>
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
</div>
and if one of your div is going down then you must adjust your div's width.
Apply a float:left to the widgets
To solve this problem :
You should add this code to .content and to .sidebar
Add float:left...
This should help
http://www.w3schools.com/cssref/pr_class_float.asp..
glad to help you
Since div is a block level element, so it will occupy 100% width of its immediate parent. Because of it, one cannot place them in a horizontal manner without making use of float - a very useful CSS property.
So in your CSS you should add the property as below, to get the desired result:
.sidebar {
float: left;
}
Watch the demo here.
To get more information about float, one can always Google, as it is an ocean of knowledge.
use CSS float Property
float: none|left|right|initial|inherit;
.sidebar {
width: 200px;
background: yellow;
color: orange;
padding: 50px;
float: left;
}
.content {
width: 200px;
background: silver;
color: red;
padding: 50px;
float: left;
}
<div class="sidebar">
This is sidebar div
</div>
<div class="content">
This is Content div
</div>
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
I am working on an assignment that is giving me grief. I am supposed to make a red box that matches the color of an image. This box is supposed to be centered on the page. The box is supposed to be 80% of the page. The image is supposed to be inside the box. The image is supposed to be 80% width of the BOX it sits in. The image is to be centered vertically. I am trying to do this using CSS. Here is my code. What am I missing?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="box">
<ul>
<li>
<a href="http://blackhawks.nhl.com/">
<img src="http://www.wallpaperpimper.com/wallpaper/Hockey/Chicago_Blackhawks/Chicago-Blackhawks-Blackhawks-Logo-1-JPS6RQXFBC-1024x768.jpg">
</a>
</li>
</ul>
</div>
</body>
</html>
CSS:
.box {
width: 80%;
background-color: #dd111;
margin-left: auto;
margin-right: auto;
}
.box ul {
margin-left:auto;
margin-right:auto;
}
.box ul li {
width: 80%;
vertical-align: middle;
}
If the list isn't necessary you could do this. If you want to use a list you need to set the ul padding and margin to 0.
<style type="text/css">
.box {
width:80%;
margin:0 auto 0 auto;
}
img {
width:80%;
margin:0 auto 0 auto;
display:block;
}
.box-stripe {
width:80%;
height:15px;
margin:0 auto 0 auto;
}
</style>
<body>
<div class="box">
<div class="box-stripe"></div>
<img src="yourimage.png" alt="" />
<div class="box-stripe"></div>
</div>
</body>
Or if you prefer the list you could do something like this. It should get you close anyways.
<style type="text/javascript">
.box {
width:80%;
margin:0 auto 0 auto;
}
.box ul {
width:80%;
margin:0 auto 0 auto;
padding:0px;
display:block; /*may not need to do this but I don't think a UL is a block element */
}
.box ul .box-stripe {
width:100%;
display:block;
height:15px;
padding:0px;
margin:0px;
}
.box ul .img {
width:100%;
display:block;
padding:0px;
margin:0px;
}
</style>
<body>
<div class="box">
<ul>
<li>class="box-stripe"></li>
<li class="img"><img src="yourimage.png" alt="" /></li>
<li class="box-stripe"></li>
</ul>
</div>
</body>
Every browser treats HTML elements differently in terms of padding, margin, line height, ect. This is why I recommend a CSS reset. And most UL's have some padding by default.
I'm not sure if you need the ul and li for some reason, but the main thing you are missing is that the img is not given a width.
If an img does not have a width it will use the native width of the image and stretch its container. In the case of your current html (with the ul) you would need to give the image a width of 100% since the li is already set to 80%.
Try turning on borders (or use Firebug or Chrome developer tools to inspect your elements). With borders on I think it becomes a lot more obvious why things are not positioned as you think they are.
http://jsfiddle.net/2vWY3/1/
This looks like it, although I'm not sure if the box needs to be 80 or 100% of the height of the page.
http://jsfiddle.net/GolezTrol/ZLUGg/2/
I changed the box color and the image size for testing/demonstration. Makes it easier to develop too.
Hi I'm trying to fix a bit of test html to work with opera/chrome. It's using the holygrail box model from matt levine.
In IE and firefox it looks like
correct layout http://img187.imageshack.us/img187/4049/writedn1.jpg
In chrome, opera and safari it pushes the sidebar element down. I've played with the margin and paddings but it still doesn't work. am I missing something?
wrong layout http://img73.imageshack.us/img73/6279/wrongpx8.jpg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
body {
min-width:500px;
padding: 0 106px;
}
#center, #left, #right,#sidebar,#main {
position:relative;
float:left;
}
#center {
width:100%;
background:#CCC;
}
#left {
width:106px;
margin-left: -100%;
right:106px;
background:#C0C;
}
#right {
width:106px;
margin-right: -106px;
background:#CC0;
}
#header{
width:100%;
background:#0CC;
}
#footer{
width:100%;
background:#A0E;
clear:both;
}
#content{
padding-right:330px;
background:#F00;
}
#main{
width:100%;
padding:5px 15px;
}
#sidebar{
width:300px;
margin-right: -300px;
background:#33C;
}
</style>
</head>
<body>
<div id="center">
<div id="header">header</div>
<div id="content">
<div id="main">
copy
</div>
<div id="sidebar">
side
</div>
</div>
<div id="footer">footer</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</body>
</html>
I got it to work in both Safari and Firefox (haven't tested the other browsers yet)
Change this:
#content{
padding-right:300px;
background:#F00;
}
#main{
padding:5px 15px;
width: 100%;
margin-right: -30px;
}
Dunno why this works any better than what you have above, but it does :)
If you're looking for premade grid-based layouts, though, I'd suggest BlueprintCSS. I've used it for a bunch of projects, and it's really easy-to-use. It is a fixed layout (not fluid like yours), so that may be a deal-breaker.
Well, I know that min-width doesn't work on the BODY tag, at least in certain versions of IE (I thought it worked in Firefox, though). You might want to try putting your entire page in a DIV tag and setting min-width on that.