I am attempting to layout a site:
http://kenzshop.com/Brandon/index
I cannot get the main content area (blue colored)to align correctly.
The header (red) has a fluid with, the sidebar (yellow) has a fluid height, the main content area should be fluid width and height, but I cannot figure out how to get it to align correctly.
It should align width-wise with the header.
Can anyone see what my issue is?
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">
<head>
<title>Title of document</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"></meta>
<meta http-equiv="Content-Type" content="text/css; charset=utf-8"></meta>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="main"><!--<iframe src="http://www.cnn.com/"/> --></div>
<div id="sidebar"></div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#header{
height: 80px;
border: 1px solid black;
padding: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color:red;
}
#main{
position:absolute;
left:0;
top:90px;
right: 263px;
padding:0;
margin-top: 12px;
margin-left: 5px;
margin-bottom:5px;
height:99% !important; /* works only if parent container is assigned a height value */
width:100%;
border:1px solid black;
background-color:blue;
}
iframe{
margin: 5px;
display:block;
width:100%!important;
height:100%!important;
}
#sidebar{
position:absolute;
right:0;
top:102px;
padding:0;
margin-right:5px;
margin-bottom:5px;
width:250px;
height:99%; /* works only if parent container is assigned a height value */
border:1px solid black;
background-color:yellow;
}
Since their are little to no variables, this is easily solved by relying on position: absolute, without affecting flexibility.
The HTML:
<header class="header"></header>
<div class="content">
<iframe src="http://www.cnn.com/"></iframe>
</div>
<div class="sidebar"></div>
The CSS:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header,
.content,
.sidebar {
position: absolute;
border: 1px solid black;
}
.header {
top: 5px;
right: 5px;
left: 5px;
height: 80px;
background: red;
}
.content,
.sidebar {
top: 90px;
bottom: 5px;
}
.content {
left: 5px;
right: 260px;
}
.content iframe {
width: 100%;
height: 100%;
}
.sidebar {
right: 5px;
width: 250px;
background: green;
}
Take a look at it here: http://jsfiddle.net/joplomacedo/WBRCj/
Something like this?
HTML:
<div id="header"></div>
<div id="main"></div>
<div id="sidebar"></div>
CSS:
#header {
height: 60px;
background: red;
margin-bottom: 10px
}
#main {
width: 68%;
background: blue;
float: left;
height: 800px;
}
#sidebar {
width: 30%;
background:yellow;
float: right;
height: 800px;
}
And the Fiddle
P.S. Wasn't sure whether to base it off your current site, or your image posted, as both seem to follow different concepts. Did image for now.
Related
Here is the code:
body {
position: relative;
font-size: 30px;
}
#middle {
width: 420px;
height: 500px;
margin: 100px auto 0;
border: solid;
}
#left {
position: fixed;
border-style: solid;
border-color: red;
top: 50%;
transform: translateY(-50%);
left: 0;
}
#right {
position: fixed;
border-style: solid;
border-color: blue;
top: 50%;
transform: translateY(-50%);
right: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Centered divs</title>
</head>
<body>
<div id="left">▢</div>
<div id="middle"></div>
<div id="right">▢</div>
</body>
</html>
How should the CSS code get modified in order for the two divs with ids left and right to get centered between the div in the middle and their respective edges of the screen? (Till now I have succeeded in centering the divs vertically and placing them on both sides of the central div, but not in centering them horizontally within the space of the central div and the screen edges.)
since the middle div has a fixed width you can use some math:
body {
font-size: 30px;
}
#middle {
width: 420px;
height: 500px;
margin: 100px auto 0;
border: solid;
}
#left {
position: fixed;
border: solid red;
top: 50%;
transform: translate(-50%,-50%); /* updated this too */
left: calc((100% - 420px)/4); /* half of (half the remaining space) */
}
#right {
position: fixed;
border: solid blue;
top: 50%;
transform: translate(50%,-50%);
right: calc((100% - 420px)/4);
}
* {
box-sizing:border-box;
}
<div id="left">▢</div>
<div id="middle"></div>
<div id="right">▢</div>
the best way to do this is to use flexbox
body {
font-size: 30px;
}
#container{
display:flex;
justify-content:space-between;
align-items:center;
}
#middle {
width: 420px;
height: 500px;
border: solid;
}
#left {
border-style: solid;
border-color: red;
display:inline;
}
#right {
border-style: solid;
border-color: blue;
display:inline;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Centered divs</title>
</head>
<body>
<div id='container'>
<span id="left">▢</span>
<div id="middle"></div>
<div id="right">▢</div>
</div>
</body>
</html>
I am new with CSS and need some help, please. Although it seems to be simple to solve, I am already working in this problem for about 4 hours. I found many similar questions on internet, but each case is particulary different from mine, and the "solutions" can't solve my problem (already tried most of them).
Here is the basic structure of my html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
And here is the CSS I am trying to implement:
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
width: 1000px;
// height: 100%;
// min-height: 100%;
margin: 0 auto;
// padding-bottom: 50px;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
// height: 100%;
// min-height: 100%;
background-color: #94C9FF;
}
#body #page {
overflow: hidden;
// height: 100%;
// min-height: 100%;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
Obs: Commented lines are SOME of the solutions I already tried.
Here is what I got so far:
And finally here is what I really need:
The reason you were having trouble getting the #body div to be the full height of the remaining space is because each of the wrapping elements needed height:100% not just one of them. That means #main, #body, #page and #menu.
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
height:100%;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
height:100%;
width: 1000px;
margin: 0 auto;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
background-color: #94C9FF;
height:100%;
}
#body #page {
overflow: hidden;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
height:100%;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
you can add the following to css based on the size of content you require the content to be, just change the pixels based on the content you want:-
div#page {
width: 100%;
height: 600px;
}
I hope it will help
You can do this in the following way--
Just use the height unit as vh(viewport height) relative to viewport. Add rest of your css to get desired width effect.
checkout the snippet
#main {
background-color:blue;
height: 10vh;
}
#body {
background-color:grey;
height:80vh;
}
#foot {
background-color:blue;
height: 10vh;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
You can find compatibility here---
vh compatibility
EDIT
As fallback for vh unit I think you can use javascript . Through javascript you can get the window size. Then specify the height of the footer as percentage of the window height.
This question can be good starting point
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
First sorry for bad English.
I create the following code:
HTML:
<!DOCTYPE html>
<html>
<head lang="fa" dir="rtl" style="font-family: tahoma">
<meta charset="UTF-8">
<title>test</title>
<link rel="Stylesheet" type="text/css" href="st.css">
</head>
<body>
<div id="container">
<div id="ontop"></div>
<div id="header"></div>
<div id="sideRight"></div>
<div id="center"></div>
<div id="sideLeft"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
#container{
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
}
#ontop{
width: 200px;
height: 200px;
background-color: purple;
position:absolute;
top:20px;
right:20px;
opacity:0.5;
}
#header{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideRight{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#center{
width: 58%;
height: 60%;
background-color: green;
float: right;
margin-top:3%;
margin-right: 3%;
}
#sideLeft{
width: 15%;
height: 60%;
background-color: yellow;
float: right;
margin-top:3%;
margin-right: 3%;
}
#footer{
width: 94%;
height: 10%;
background-color: blue;
float: right;
margin-top:3%;
margin-right: 3%;
}
I want to position div with "ontop" id in 20px from right and 20px from top of "container" div and be on top of other div.in my code position of "ontop" div ,related to screen not "container" div.
If you want it to be relative to the parent element, all you would have to do is add position: relative to the parent element. It is otherwise assumed to be absolutely positioned relative to the next relatively positioned parent element. Since there were none, it was relative to the window.
Example Here
#container {
width:1000px;
height: 600px;
background-color: red;
margin: 0 auto;
position: relative; /* Added .. */
}
I'm trying to get a css layout for all modern browsers going and having a hard time. I am not a css guru but hoping one could guide me in the right direction. I'm trying to get a layout similar to this one but with a 100% height left nav and 100% width for the rest. see below layout image.
Based on the link above, I have this, but missing the 100% height...
.wrapper {
width: 100%;
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
border: 2px solid #00f
}
.banner {
background-color: red;
height: 50px;
}
.contentBox {
background-color: pink;
height: 200px;
margin: 20px;
}
<div class="wrapper">
<div class="menu-vertical">side</div>
<div class="mainContent">
<div class="banner">banner</div>
<div class="contentBox">content</div>
</div>
</div>
Any help is appreciated, thank-you
here's the code:
<!DOCTYPE html>
<html>
<body>
<div style="height:100%;position:absolute; width:10%; margin:0; top:0; left:0; background-color:red;">Content</div>
<div style="height:10%; position:absolute;width:90%; margin:0; top:0; left:10%;background-color:blue;">Content</div>
<div style="height:90%;position:absolute; width:90%; margin:0; top:10%; left:10%; background-color:yellow;margin:0 auto;"><div style="background-color:green;width:95%;height:95%;position:relative;top:20px;left:30px;">Content</div></div>
</body>
</html>