I want to create container that has two elements with colors given in the picture. The two are different divs and must stay side by side. How do I do it?
Here is my code:
<html>
<head>
<title>Testing</title>
<style>
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
</body>
</html>
You didn't set a height on the body of the document so setting a percentage on the divs won't do anything until you do. You also needed to float the sidenav div.
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
float: left
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
html,
body {
height: 100%;
}
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
Your code Updated!
body, html{
padding:0px;
margin:0px;
height:100%;
}
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
float: left;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
How about this:
<div class="container">
<div class="sidenav">
test
</div>
<div class="bgrnd">
test
</div>
</div>
CSS:
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
color: #fff;
float: left;
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
color: #fff;
float: right;
}
You can set .sidenav and .bgrnd to position: absolute; and position them accordingly from there. Also, you've set .container to: width: 50%; and height: 50%; which I presume you don't want.
.container {
height: 100%;
width: 100%;
}
.sidenav {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
}
.bgrnd {
width: 75%;
height: 100%;
position: absolute;
top: 0;
left: 25%;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
</body>
</html>
How about using css-flex.
#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.div1 {
width: 25%;
height: 50px;
}
.div2 {
width: 75%;
height: 50px;
}
<div id="main">
<div class="div1" style="background-color:coral;">A</div>
<div class="div2" style="background-color:lightblue;">B</div>
</div>
Related
How do I get the .top_box to be fixed in the head of the .content?
With the current code, the .top_box always scrolls along with the .content.
.wrapper {
height: 160px;
display: flex;
flex-direction: column;
}
.title_container {
background: pink;
}
.content {
height: 0;
flex: auto;
position: relative;
overflow-y: auto;
overflow-x: hidden;
background-color: bisque;
}
.top_box {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 16px;
background: royalblue;
}
.scroll_fill {
height: 500px;
}
<div class="wrapper">
<div class="title_container">anyString</div>
<div class="content">
<div class="top_box"></div>
<div class="scroll_fill"></div>
</div>
</div>
You can just change the order of the HTML-Elements in the code and write .top before .item. If you do that, you can also remove most of the CSS because it’s unnecessary.
Here‘s a full example:
.box1 {
height: 600px;
display: flex;
flex-direction: column;
}
.box2 {
background: pink;
}
.box3 {
background-color: red;
}
.top {
width: 300px;
height: 5px;
background: blue;
}
.item {
height: 1000px;
}
<div class="box1">
<div class="box2">anyString</div>
<div class="box3">
<div class="top"></div>
<div class="item"></div>
</div>
</div>
Also a few other things: I wouldnt recommend just using divs and naming them like box1, box2, box3, .... Instead, give them names wich describe their use and meaning like wrapper, top_container, bottom_container, top_item, content, ...:
CSS Naming Conventions.
You can also use specific tags with semantic meanings: Sematic HTML5 Elements
Hope that helps
.wrapper {
height: 160px;
display: flex;
flex-direction: column;
}
.title_container {
background: pink;
}
.content {
height: 0;
flex: auto;
position: relative;
overflow: hidden;
background-color: bisque;
}
.contentInner {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.top_box {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 16px;
background: royalblue;
}
.scroll_fill {
height: 500px;
}
<div class="wrapper">
<div class="title_container">anyString</div>
<div class="content">
<div class="top_box"></div>
<div class="contentInner">
<div class="scroll_fill"></div>
</div>
</div>
</div>
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I am trying to create something similar to this:
I tried with the following code, but I see nothing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
}
#table {
width: 100%;
height: 100%;
display: table;
}
#left {
width: 30%;
height: 100%;
display: table-column;
}
#right {
width: 70%;
height: 100%;
display: table-column;
}
#left_1, #left_2, #left_3, #right_1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left_1 {
background-color: green;
height: 40%;
}
#left_2 {
background-color: red;
height: 30%;
}
#left_3 {
background-color: lightgray;
height: 30%;
}
#right_1 {
background-color: black;
color: white;
height: 100%;
}
</style>
</head>
<body>
<div id="table">
<div id="left">
<div id="left_1">left_1</div>
<div id="left_2">left_2</div>
<div id="left_3">left_3</div>
</div>
<div id="right">
<div id="right_1">right_1</div>
</div>
</div>
</body>
</html>
I was able to successfully use table-row, but I can't get table-column to work. What am I doing wrong?
You can get it with flexbox.
The needed changes in CSS
#table {
display: flex;
}
#left, #right {
flex: 1;
display: flex;
flex-direction: column;
}
#left_1, #left_2, #left_3, #right_1 {
display: flex;
align-items: center;
justify-content: center;
}
updated jsfiddle demo: https://jsfiddle.net/1mew6hqj/2/
Check this guide for flexbox to learn how it works.
+1 to Michael Coker, but here is another possibility.
* {
margin: 0;
}
body,
html {
height: 100%;
}
#table {
width: 100%;
max-height: 250px;
height: 100%;
display: block;
position: relative;
}
#left {
width: 30%;
height: 100%;
display: table;
float: left;
}
#right {
width: 70%;
height: 100%;
display: table;
float: left;
}
.row { display: table-row; }
#left_1,
#left_2,
#left_3,
#right_1 {
width: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left_1 {
background-color: green;
height: 40%;
}
#left_2 {
background-color: red;
height: 30%;
}
#left_3 {
background-color: lightgray;
height: 30%;
}
#right_1 {
background-color: black;
color: white;
height: 100%;
}
<div id="table">
<div id="left">
<div class="row">
<div id="left_1">left_1</div>
</div>
<div class="row">
<div id="left_2">left_2</div>
</div>
<div class="row">
<div id="left_3">left_3</div>
</div>
</div>
<div id="right">
<div class="row">
<div id="right_1">right_1</div>
</div>
</div>
</div>
Note: I hope this isn't for a responsive site...
I am trying to get this layout somewhat fluid. I want #logo to be in the lower right of #infobot its size determined by the picture which I want to scale with browser window. #white should just cover up the are to the left of #logo. How do I get #white and #logo to line up next to each other and still keep the fluid sizes?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords"content=""/>
<title></title>
<link href="css/testmain.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Volkhov' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="nav">
<p>+</p>
</div>
</header>
<div id="container">
<div id="infowrap">
<div style="background-color: white" id="infotop"></div>
<div style="background-color: yellow" class="infobox"></div>
<div style="background-color: blue" class="infobox"></div>
<div style="background-color: green" class="infobox"></div>
<div style="background-color: red" class="infobox"></div>
<div id="infobot">
<div id="white"></div>
<div id="logo"><img style="height: 100%" src="img/logo3.png"></div>
</div>
</div>
</div>
<script>
$('#video, #nav').on('click', function(){
$('#nav').toggleClass('rotate');
});
</script>
<script>
$(document).ready(function(){
$("#video, #nav").click(function(){
$("#infowrap").fadeToggle(250);
});
});
</script>
<video id="video" src="vid/147000037.mp4" autoplay loop>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: purple;
}
header {
position: relative;
display: block;
height: auto;
width: 100%;
z-index: 999;
min-width: 520px;
}
#nav {
-webkit-transition: all 0.5s;
position: absolute;
float: right;
display: block;
top: 5px;
right: 15px;
color: #000000;
}
#nav a {
font-family: "HelveticaNeue-UltraLight","HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
font-size: 2.5em;
color: #000000;
}
.rotate {
-webkit-transform: rotate(45deg);
-webkit-backface-visibility: hidden;
}
#video {
position: fixed;
top:0px;left:0px;right:0px;bottom:0px;
}
#container {
position: absolute;
width: 100%;
height: 100%;
min-width: 520px;
min-height: 620px;
}
#infowrap {
z-index: 900;
display: none;
position: absolute;
top:10px;left:10px;right:10px;bottom:10px;
background-color: ;
min-width: 500px;
}
#infotop {
width: 100%;
height: 6%;
min-width: 500px;
float: left;
clear: both;
display: block;
}
.infobox {
width: 50%;
height: 44%;
min-width: 250px;
min-height: 250px;
float: left;
display: block;
}
#infobot {
width: 100%;
height: 6%;
min-width: 500px;
float: left;
clear: both;
display: block;
}
#white {
height: 100%;
width:;
float: left;
display: block;
background-color: white;
}
#logo {
float: left;
display: block;
}
DEMO
CSS:
#infobot {
width: 100%;
height: 6%;
min-width: 500px;
float: left;
clear: both;
display: block;
background:#cf5; /* some bg color? */
}
#white {
height: 100%;
width:50%; /* !!! */
float: left;
display: block;
background-color: #fff;
}
And btw use this:
$(function(){
$("#video, #nav").click(function(){
$("#infowrap").fadeToggle(250);
$('#nav').toggleClass('rotate');
});
});
To make the issue easier to analyze I have created this jsFiddle:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; }
#footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
With the markup of top, middle, and bottom sections, problem is:
1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div
2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.
I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.
http://jsfiddle.net/grc4/XTQuT/2/ does what I wanted exactly without specifying solid height values.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0;
height:100%;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 0;
}
#leftSection {
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
}
#middleSection {
position: absolute;
background-color: yellow;
left: 175px;
right: 175px;
top: 0;
bottom: 0;
color: black;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
The "padding-top: 30px;" on your 3 inner elements is making them 30px taller than the height of the actual body, creating your problem.
Remove the top padding from those 3 elements, then make your header and footer relatively positioned, rather than absolute, and you should be set.
Like this: http://jsfiddle.net/BPJxD/28/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
Your problem was that you were using needless absolute positioning in headercontainer and footercontainer, solution
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
CSS:
body { margin:0; }
#mainContainer
{
position: absolute;
right: 4%; left: 4%;
height: 100%;
}
#headerContainer
{
width: 100%;
z-index: 10;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer { height: 100%; }
#leftSection
{
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection
{
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection
{
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer
{
position: relative;
bottom: 0; width: 100%;
height: 30px;
background: #323232;
color: white;
}
Reviewing your whole Fiddle I noticed that you are using absolute positioning on every div. This is plane wrong.
You should only absolute positioning when:
You need a container that is free of the document's usual formatting. Such as a popup or a floating box.
You need to use a div inside a parent div with fixed positioning, but this will only work if parent positioning is set to relative.
You can remove all 3 of
padding-top: 30px;
like
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
and change your html like this
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top:30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top:30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top:30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
I hope this can be helpful.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; }
#headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;}
#leftSection { float: left; width:25%; background: #71ABD1; overflow: auto; color: black; padding-top: 30px; height: 100%;}
#middleSection { float: left; height:100%; width:50%; background-color: yellow; color: black; padding-top: 30px; }
#rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; }
#footerContainer { bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer"> headerContainer </div>
<div id="middleContainer" >
<div id="leftSection"> leftSection </div>
<div id="middleSection"> middleSection </div>
<div id="rightSection"> rightSection
rightSection rightSection rightSection rightSection rightSection rightSection rightSection </div>
</div>
<div id="footerContainer" > footerContainer </div>
</div>
</body>
</html>