Okay, so I know there are a few questions similar to this on StackOverflow which already have been answered but they didn't help me.
I am building a messaging service and for that I have two divs, contacts_box (300px) and message_box(500px). They are both wrapped inside a parent div which is 800px in width. I want align these two divs side by side inside the parent div. But no matter what I do, I just can't get them to align!
Please take a look at my HTML and CSS and show where I am going wrong with this?
* {
margin: 0;
padding: 0;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
width: 800px;
height: 100%;
margin: 0 auto;
clear: both;
border: 1px solid blue;
}
// Contacts Box and its elements
.contacts_box {
float:left;
height:100%;
width:300px;
border:1px dashed magenta;
}
// Message Box and its elements
.message_box {
float:right;
height:100%;
width:500px;
border:1px dashed lemonchiffon;
}
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box"> CONTACTS BOX </div>
<div class="message_box">
<div class="message_displayBox"> Message Box </div>
<div class="message_textBox"> </div>
</div>
</div>
</div>
</body>
</html>
You can use box-sizing to solve the issue rather than calculating the width and border widths:
Add box-sizing: border-box to the inner containers and box-sizing: content-box to the outer container and there you go!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
width: 800px;
height: 100%;
margin: 0 auto;
clear: both;
border: 1px solid blue;
box-sizing: content-box;
}
.contacts_box {
float: left;
height: 100%;
width: 300px;
border: 1px dashed magenta;
}
.message_box {
float: right;
height: 100%;
width: 500px;
border: 1px dashed lemonchiffon;
}
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
The most basic solution: The border of the divs is not included in the width. So you either need to calculate the width as
width1 + border1 + width2 + border2 = 800px
or make your container div larger.
Put your comments inside /* Comments Goes Here */
change your width px to % and use box-sizing: border-box; to the floated divs.
*{
margin:0;
padding:0;
}
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid blue;
}
.contacts_box
{
float:left;
height:100%;
width:40%;
border:1px dashed magenta;
box-sizing: border-box;
}
.message_box
{
float:right;
height:100%;
width:60%;
border:1px dashed lemonchiffon;
box-sizing: border-box;
}
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
The problem:
You have borders in both elements (.contact_box and .message_box) and they are taking 1px from each side so they will never fit together because there is not enough space, I recommend you to use the property box-sizing:border-box; for this cases, it'll put the borders inset of the element instead of outside, so you don't have to worry about them.
.contacts_box
{
float:left;
height:100%;
width:300px;
border:1px dashed magenta;
box-sizing: border-box;
}
.message_box
{
float:right;
height:100%;
width:500px;
border:1px dashed lemonchiffon;
box-sizing: border-box;
}
Also if you are using pure css (without pre-processors) use comments like this /* Comment */ to avoid problems.
Your comment method was wrong.
in Vanilla CSS - we use /* Your comment */
to make comments.
// - is supported in LESS, SASS, Stylus kind of pre-processors.
If you run your code on browser, you can see, none of the CSS for contactbox and messagebox was working.
*{
margin:0;
padding:0;
}
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid blue;
}
/* Contacts Box and its elements */
.contacts_box
{
float:left;
height:100%;
width:300px;
border:1px dashed magenta;
}
/* Message Box and its elements */
.message_box
{
float:right;
height:100%;
width:500px;
border:1px dashed lemonchiffon;
}
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
</html>
You give border to inner DIV so its also add in its actual width. So if possible give color to inner DIV or expand Parent DIV width.
* {
margin: 0;
padding: 0;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
width: 800px;
height: 100%;
margin: 0 auto;
clear: both;
border: 1px solid blue;
}
.contacts_box {
float: left;
height: 100%;
width: 300px;
background: blue;
}
.message_box {
float: right;
height: 100%;
width: 500px;
background: red;
}
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
</html>
NOTE:
Your code is correct but you give wrong comment in CSS. That's why its not working. Please check comment in CSS part. Here I update your code with remove comment. Its working fine.
UPDATE
Also you can using box-size:border-box outer DIV and box-size:content-box to inner DIV. You can solve it using this method also.
We have to stop using floats and start using flex!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page_layout {
position: fixed;
top: 50px;
width: 100%;
height: 100%;
border: 1px solid green;
}
.page_container {
display: flex;
flex-direction: row;
width: 800px;
height: 100%;
margin: 0 auto;
border: 1px solid blue;
}
.contacts_box {
flex: 1 0 300px;
border: 1px dashed magenta;
}
.message_box {
flex: 1 0 500px;
border-left: 1px dashed lemonchiffon;
}
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
Your container with width:300px and border:1px as a whole has 301px width. Try changing your width to 299px or making 802px the bigger box
<html>
<head>
<link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>
<style>
*{
margin:0;
padding:0;
}
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid blue;
}
.contacts_box {
float: left;
height: 100%;
width: 298px;
border: 1px dashed magenta;
}
.message_box {
float: right;
height: 100%;
width: 498px;
border: 1px dashed lemonchiffon;
}
</style>
<body>
<div class="page_layout">
<div class="page_container">
<div class="contacts_box">
CONTACTS BOX
</div>
<div class="message_box">
<div class="message_displayBox">
Message Box
</div>
<div class="message_textBox">
</div>
</div>
</div>
</div>
</body>
</html>
</html>
if want to add border then reduce width by same px which you are taking borders
like make them 498 and 298 px res.
<html>
<head>
<style>
.page_layout
{
position:fixed;
top:50px;
width:100%;
height:100%;
border:1px solid green;
}
.page_container
{
width:800px;
height:100%;
margin: 0 auto;
clear:both;
border:1px solid green;
}
#contacts_box
{
float:left;
height:100%;
width:300px !important;
background-color:#f9dada !important;
}
#message_box
{
float:left;
height:100%;
width:500px;
background-color:#deffe5;
}
</style>
</head>
<body>
<div class="page_layout">
<div class="page_container">
<div id="contacts_box">
CONTACTS BOX
</div>
<div id="message_box">
Message Box
</div>
</div>
</div>
</body>
</html>
Related
I am trying to apply css clip to an element to allow the layer behind to show through. I have the following layout..
body, html {
margin:0;
padding:0;
}
.container {
background:lightgray;
}
.clip {
position:fixed;
height:100%;
width:100px;
clip: rect(10px, 100px, 100px, 100px);
}
.section1, .section2 {
height:100vh;
width:100%;
}
.section_left_red {
height:100%;
width:100px;
background:red;
}
.section_left_blue {
height:100%;
width:100px;
background:blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
<div class="section_left_red">
</div>
<div>
<div class="section2">
<div class="section_left_blue">
</div>
<div>
</div>
I am trying to achieve something like this..
So as I scroll down, the blue background then shows through. Can anyone show me what I am doing wrong?
You can probably use multiple background to create this. The idea is to color only a part of the background making the remaining transparent:
body,
html {
margin: 0;
padding: 0;
}
.clip {
position: fixed;
height: 100%;
width: 200px;
box-sizing:border-box;
border:5px solid lightgray;
background:
linear-gradient(lightgray,lightgray) right/50% 100%,
linear-gradient(lightgray,lightgray) bottom/100% 80%;
background-repeat:no-repeat;
}
.section1,
.section2 {
height: 100vh;
width: 100%;
background: red;
}
.section2 {
background: blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
</div>
<div class="section2">
</div>
</div>
I don't believe that clip is the technique that you'll need to achieve this.
Clip css property is meant cut off part of an image that is absolutely positioned. I don't think it's meant for other elements.
instead of clip, have you tried using gradients to create a hole inside? Or maybe even a border:
.clip {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
border-top: 10px solid #fff;
border-left: 10px solid #fff;
border-right: calc(100vw - 60px) solid #fff;
border-bottom: calc(100vh - 60px) solid #fff;
box-sizing: border-box;
}
I have got the following code:
HTML:
<div id="mapWrapper" style="height: 624px;">
<div class="box" id="map">
<h1>Campus</h1>
<p>Description Campus Map.</p>
<img src="abc.png">
</div>
</div>
CSS:
.box {
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
padding: 3px;
overflow:hidden;
height:100%;
}
#mapWrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
overflow: hidden;
padding: 10px;
}
#map {
display: inline-block;
position: relative;
}
#map img {
height: 100%;
}
I want the image to take the rest of the height, that is free in the map-div. Currenty the image is set to 100% and that is why it runs out of the box at the bottom. Can someone help? Thanks!
Why not use a display:table setup, the advantage of this is that you can add as much content as you want to the first 'row' and the image will take up the remaining space (whatever is left from the table height minus the first row of content) and scale accordingly.
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<h1>Campus</h1>
<p>Description Campus Map.</p>
</div>
</div>
<div class='row'>
<div class='cell'></div>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:624px;
width:100%;
max-height:624px;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
height:1%;
}
.row:last-of-type >.cell {
height:100%;
background-image:url(http://www.gettyimages.co.uk/CMS/StaticContent/1357941082241_new_banner-700x465.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
}
I have this layout:
<div id="content">
<div id="foreground">
</div>
<div id="background">
</div>
</div>
<div id="footer">
</div>
I need background div displayed under foreground div, this I have done using position:absolute and it works ok.
problem is after setting both foreground and background absolute position they are taken out of normal flow, parent div (content) has no real width and this screws up footer position.
#background
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
#foreground
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
#content
{
position:relative;
}
#footer
{
position:relative;
}
Content width is dynamic so I can't set absolute position to footer and I really would like to avoid some javascript hacks, is there any solution to this?
I would have done it like this:
HTML:
<div id="content">
<div id="foreground">
Row 1<br>
Row 2<br>
Row 3<br>
Row 4
</div>
<div id="background">
</div>
</div>
<div class="clear"></div>
<div id="footer">
The footer
</div>
CSS:
#background
{
float: left;
background-color: #ff0;
position:absolute;
left:0px;
top:0px;
z-index:-1;
width: 100%;
height: 100%;
display: block;
}
#foreground
{
float: left;
z-index:1;
}
#content
{
position:relative;
border: 1px solid #f00;
float: left;
width: 100%;
}
#footer
{
border: 1px solid #f0f;
position:relative;
width: 100%;
}
.clear
{
clear: both;
}
Fiddle: http://jsfiddle.net/4LSZK/
Is there a reason you can't set a height on #content? So, something like this:
#content {
border: 1px solid red;
position: relative;
height: 200px;
}
#foreground {
position: absolute;
top: 50px;
height: 100px;
width: 100%;
background: yellow;
z-index: 2;
}
#background {
position: absolute;
height: 100px;
width: 100%;
background: red;
z-index: 1;
}
#footer {
border: 1px solid red;
}
Here's a fiddle: http://jsfiddle.net/DuWRe/1/
(I've added some borders and backgrounds so each element's position can be easily identified.)
I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
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>