I want to create a two column layout with the right floated column containing a div that becomes scrollable once its content overflows the browser window height.
This is the html code that I am working on:
<div class=container>
<div class=column_A>A</div>
<div class=column_B>B
<div class=content>C<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>C
</div>B
</div>
</div>
And this is the css code:
.column_A {
float: left;
border: black solid 2px;
height: 500px;
width: 65%;
background: red;
}
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
}
.content {
border: white solid 3px;
overflow: auto;
background: green;
}
The scroll is currently on the browser window, how do I transfer it to the content?
You use overflow: auto like this:
.column_B {
float: right;
border: black solid 2px;
width: 30%;
background: blue;
overflow: auto;
height: 600px; /* ? */
}
You need to specify the height for your right column, though.
EDIT: To answer your comment, the easy way to go about it is if you set your document body's height to 100%, like this:
body {
height: 100%;
}
Then use a custom percentage to set the column's height to your liking.
.column_B {
...
height: 99%; /* or whatever you need */
...
}
Related
I am working on a project that has popup boxes for the user to interact with. I am trying to put 2 blocks of content next to each other in the popup box.
I've been looking around for answers, but none of the common solutions seem to be working here. I've tried float:left, display: inline-block, etc. The only thing that has worked is to set the exact width/heights and apply a margin to the second container, but I'd like to avoid this hack-y solution.
HTML:
<div id="equip-robot-modal" class="modal">
<div id="equip-robot-modal-content" class="modal-content">
<div id="equip-modal-content-inner" class="modal-content-inner">
<div id="robot-info-content">
<header id="equip-header">
<h2 id="equip-header-text">Robot Name Header</h2>
</header>
</div><!-- #robot-info-content -->
<div id="inventory-list-content">
<div id="inventory-list-container">
<p>
put more content here
</p>
</div><!-- #inventory-list-container -->
<div id="auto-match-container">
<button type="button" style="width: 50%; height: 50px; margin-top: 20px;" class="button">
<?php //echo langMatch(
//'PLAYER_SELECTOR_AUTO_MATCH'); ?>
Go to Store
</button>
</div><!-- #auto-match-container -->
</div><!-- #inventory-list-content -->
</div><!-- #equip-modal-content-inner -->
</div><!-- #equip-robot-modal-content -->
CSS:
#robot-info-content {
min-width: 500px;
padding: 10px;
position: relative;
float: left;
background-color: red;
}
#robot-image {
padding: 20px 0;
}
#modal-progress-bars {
min-height: 75%;
}
#inventory-list-content {
min-width: 400px;
padding: 10px;
display: inline-block;
float: left;
background-color: purple;
}
#inventory-list-container {
width: 100%;
height: 430px;
border: 1px solid black;
overflow-y: scroll;
}
.modal-content {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 350px;
height: auto;
transform: translate(-50%, -50%);
background-color: #f7f7f7;
color: black;
border: 2px solid black;
overflow: visible;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
padding: 10px 50px;
margin: 0 auto;
}
See the fiddle: https://jsfiddle.net/kqa25wgv/
I'd like to float the 2 content divs within the modal-content inner div. Any suggestions?
Here are some values that worked for me. I stripped out all the superfluous ones:
.modal-content {
width: 800px;}
#robot-info-content {
width: 50%;
float: left;
background-color: red;
}
#inventory-list-content {
width: 50%;
float: left;
background-color: purple;
}
#inventory-list-container {
height: 430px;
border: 1px solid black;
}
.modal-content-inner {
margin: 20px 50px;
text-align: center;
}
.modal-content-inner header {
background-color: white;
border: 1px solid black;
}
You'll notice that I set the width of the .modal-content class to 800px. That's arbitrary and you can change it to what you want (or set it as a percentage of its containing div, if you have one). The important change is to replace your minimum-width settings with width settings, and set them to a percentage. The problem that you have is that your two inner divs are too wide for their container, so the second one wraps to the next line, so to speak.
Of course, if you use padding and/or margins on the inner content divs, you won't be able to set them at 50% without having the same problem.
The other thing that you'll want to experiment with is floating one content div to the left and the other to the right. If you float them both to the left, it won't make a difference so long as they take up the entire width of their container (and no more than the entire width). This can get tricky when you start using static values for your margins and padding, so you'll need to experiment. (You can also use percent values for margins and padding, which can be less tricky.)
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
This is for a standard centered responsive .content div with various breakpoints to set its width.
The design requirements is part of the right side of .content has a div with a colored background - black in this case - and that background color "bleeds" all the way to the right edge of the viewport. Likewise, it could be used on the left side also.
What I came up with involves tables, but I was wondering if there was a non-table version I wasn't able to figure out.
<div id="contain">
<div id="left"><!-- nothing can go here to spacing breaks --></div>
<div id="content">
<div id="rightfloat">status</div>
<div id="somecontent">content<br>blue borders for dev only</div>
</div>
<div id="right"><!-- nothing can go here to spacing breaks --></div>
</div>
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left, #right {
text-decoration: none;
display: table-cell;
width: auto;
text-align: center;
padding: 0;
}
#left {
background: white;
}
#right {
background: black;
color: white;
}
#content {
display: table-cell;
width: 360px;
background: #F00;
height: 4em;
border-right: 1px solid blue;
border-left: 1px solid blue;
}
#rightfloat {
float: right;
width: 20%;
background: black;
color: white;
height: 100%;
}
I've created a js fiddle:
http://jsfiddle.net/toddzebert/5DWFh/
Thanks!
I have 2 divs side by side.
The left div has all different heights, how can I make the right div automatically resize to the size of left div? If the content of the right div is larger than the left div there should be a scroll bar added to it.
The HTML
<div class="wrapper">
<div class="left"><!-- PHP Generated Content --></div>
<div class="right"><!-- PHP Generated Content --></div>
</div>
The CSS
.left{
width: 70%;
float: left;
}
.right{
width: 29%;
float: right;
border: solid 1px #000000;
height: 100%;
min-height: 200px;
overflow: auto;
}
.wrapper{
height: auto;
float: left;
border: solid 1px red;
}
http://jsfiddle.net/userdude/MJrS9/
Easy equal height columns:
.left{
width: 70%;
display: table-cell;
}
.right{
width: 29%;
border: solid 1px #000000;
display: table-cell;
}
.wrapper{
display: table;
border: solid 1px red;
width: 100%;
}
http://jsfiddle.net/g5mvs/
Without giving a pre-defined height to the parent '.wrapper', there is no way (that I can see) of detecting the height set against '.left' and applying it to '.right'. Even setting the height of the right div to 'inherit' would only pick up the height which is adjusting dynamically anyway. Perhaps someone could suggest a solution using javascript.