I got a problem with CSS styling of a page.
Basically I have a div that will be used as a dialog in which I'd like to organize the content in 2 columns: the first one could contain a long list of elements, and should be scrollable, the second one should be small and in a fixed position. Thus I don't want all the dialog content to be crollable but just the half of it.
I put toghether an example here on jsfiddle in case you need to do some try... the code is:
CSS
#container {
border: 1px solid black;
height: 200px;
}
#main {
display: table;
border: 1px dashed blue;
height: 200px;
}
#row{
display: table-row;
height: 200px;
}
#leftPanel{
display: table-cell;
width: 50%;
height: 200px;
overflow: auto;
border: 1px dotted red;
}
#rightPanel{
display: table-cell;
width: 50%;
vertical-align: top;
height: 200px;
}
HTML
<div id="container">
<div id="main">
<div id="row">
<div id="leftPanel"> <!-- This one should be scrollable -->
<!-- Long list of element here-->
</div>
<div id="rightPanel">
<div style="height: 50px;">
Something here
</div>
<div style="height: 50px;">
Something else here
</div>
</div>
</div>
</div>
</div>
How can I get leftPanel to be scrollable?
As you can see I tried even setting a fixed height of every component of the CSS table, but without any result... what's wrong here?
Like this: http://jsfiddle.net/Zw8WK/10/
Using overflow-y: scroll or alternately overflow : scroll
Now if you need the height of the left column to be some kind of variable height it might be more tricky, here I am setting it to the height of the parent container.
Related
I need to create a container div with a pulled-up toggle button (but this could be also a simple span, a label or everything else), but that can be also re-sizable.
Unfortunately (https://css-tricks.com/almanac/properties/r/resize/):
Super important to know: resize does nothing unless the overflow property is set to something other than visible, which is its initial value for most elements.
I tried to write a simple example to compare limits of each conflicting properties (below only an extract):
<div class="container">
<button>Toggle</button>
<div class="content">...</div>
</div>
<div class="container overflow-hidden">
<button>Toggle</button>
<div class="content">...</div>
</div>
.container {
border:solid 1px red;
position:relative;
resize:horizontal;
}
.overflow-hidden {
overflow:hidden;
}
button {
position:absolute;
top:-20px;
}
I can't figure out how to solve this problem, so how to have a resizable container that can show an overflowed item (Possibly with only CSS)?
how to have a resizable container that can show an overflowed item
For resize to work, the element need an overflow other than visible, so the answer to that is no.
I need to create a container div with a pulled-up toggle button
If you alter your markup a little, you can do like this
Fiddle demo
Stack snippet
.container {
position: relative;
display: inline-block;
}
.overflow-hidden {
border: solid 1px red;
width: 50%;
height: 80%;
margin-top: 18px;
resize: horizontal;
padding: 20px;
overflow: hidden;
}
button {
position: absolute;
top: 0;
left: 0;
}
.content {
border: solid 1px blue;
height: 100px;
}
<div class="container">
<button>Toggle</button>
<div class="overflow-hidden">
<div class="content">
WITH "overflow:hidden":
<br> "resize" feature is available <strike>but pulled-up button is obviously semi-hidden</strike>
</div>
</div>
</div>
I need to center images inside of multiple divs. Everything I try breaks.
These are four boxes, alternating red & blue - horizontal. Looking to have them centered in the page and pushed to the top under another div block. Within each block is an image, which is centered to the same % margin on all sides to the relative red or blue box. You can see below I tried both placing the image directly in a redbox/bluebox div or even going one layer deeper with a box just for the image.
4 Box Example - HTML:
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="images/2.png">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="images/3.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="images/4.png">
</div>
</div>
CSS:
box-container {
height: 900px;
width: 950px;
padding: 12px;
display: inline-block;
vertical-align: top;
margin-left: auto;
}
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
}
.thumbnail img {
display: block;
margin: auto;
height: 130px;
width: 150px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
You need to add padding to the image based on the height of your thumbnail div.
.thumbnail img {
display: block;
height: 130px;
width: 150px;
padding: 10px;
}
.bluebox img, .redbox .thumbnail img, .bluebox .thumbnail img {
display: block;
margin: 0 auto;
}
or
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
text-align: center;
}
using flexbox
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
display: flex;
align-items: center;
justify-content: center;
}
I believe I have what you are looking for in this here JSFiddle I just wipped up: https://jsfiddle.net/9yLspwr6/5/
A few key points before the code...
In order to have all the div elements 'float' left you ahve to apply div.className{float:left;} This will ensure divs float left to right and wrap around if they run out of space (much like a paragraph of text). More on CSS float property here: https://www.w3schools.com/css/css_float.asp
Vertical margin does not support 'margin:auto;' like it does for horizontal. Margin can be defined by div.ClassName{margin: 0px 0px 0px 0px;} OR div.className{margin:0px auto;}. The first element this way is for top/bottom margin. The second is for left/right margin. I had to use a little math to vertically center your images, but it gets you what you need. Here is some good documentation on margin: https://www.w3schools.com/cssref/pr_margin.asp
Cleaned up the HTML and removed some CSS no longer needed. I did this to simplify the code while maintaining the solution. If you drop this code into a site you'll want to ensure you only target only the appropriate tags. For example - my code is targeting ALL img tags. You would want to put a class or ID on the IMG tags you want and then ensure that is reflected in the CSS.
I modified the HTML quite a bit. Removed much of the unnecessary elements that were in place for troubleshooting.
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<img src="images/2.png">
</div>
<div class="bluebox">
<img src="images/3.jpg">
</div>
<div class="redbox">
<img src="images/4.png">
</div>
Modified CSS below:
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
float:left; // new. essentially left justifies the divs.
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
float:left; // new
}
img { // simplified the target. wrap entire contents of the HTML with a different DIV id to target only images within that div
display: block;
margin: 10px auto; // added 10px. it will then apply 10px margin to top and bottom, auto on left/right
height: 130px;
width: 150px;
}
That should do it. Hope it helps!
How do I align the red box with the gray box vertically?
http://jsfiddle.net/sLZzK/1/
I need several box combinations like that on my page, which is why I cannot simply push the red box up manually. A negative margin won't work either, since I do not know in advance how much content will be in the gray box. And the red box must overlap other page content, hence the absolute positioning. (http://jsfiddle.net/xMm82/)
CSS:
body {
padding: 0;
margin: 10px;
}
.left_div {
margin-bottom: 10px;
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
position: absolute;
border: 1px solid red;
left: 311px;
width: 200px;
height: 200px;
}
HTML:
<div class="left_div">gray box
<div class="right_div">red box</div>
</div>
Why are you using absolute positioning for such structure? In the case the better solution is to use float: left for each div. If you want to have two divs aligned vertically use display: table-cell rule. Here it is:
FIDDLE
UPDATE: Try to use this:
FIDDLE
what I've understood is you want gray box on top of Red box:
first of all wrap them in a parent div.
set the width of wrapper to desirable width.
set width to 100%(both red and gray) and you are done !! (fiddle)
If you want to arrange them horizontally:
left_div will be wrapper
it will contain 2 child div's
left one will have content and right one will be red box.(fiddle)
I would do it this way:
HTML:
<div class="container">
<div class="left_div">gray box</div>
<div class="right_div yellow">red box</div>
<div class="clr"></div>
</div>
CSS:
.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}
Fiddle here.
use float to arrange vertically and clear:both to prevent any errors
here's the corrected one
.left{
float:left;
width: 300px;
}
.right{
float:left;
width: 200px;
}
.left_div {
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="left">
<div class="left_div">
</div>
</div>
<div class="right">
<div class="right_div">
</div>
</div>
<div style="clear:both"></div>
http://jsfiddle.net/sLZzK/8/
There you go: http://jsfiddle.net/sLZzK/14/
HTML:
<div class="wrapper">
<div class="left_div">gray box</div>
<div class="right_div">red box</div>
</div>
CSS:
.wrapper {
border: 1px solid #369;
padding: 10px;
}
.wrapper > div {
display: inline-block;
vertical-align: middle;
}
You might also want to read about flexbox which will give you a similar and more consistent result, however it's not fully supported on various browsers yet.
Here's what I am trying to accomplish...
"parent" has position:relative
"div 1-3" have position:absolute
However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;
Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?
A div should already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:
http://jsfiddle.net/mWcWV/
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>
Should be straight:
HTML:
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
CSS:
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffbf00;
}
.red {
background-color: #f00;
width: 200px;
height: 150px;
margin: 5px auto;
}
.blue {
background-color: #0f0;
width: 200px;
height: 150px;
margin: 5px auto;
}
.green {
background-color: #00f;
width: 200px;
height: 150px;
margin: 5px auto;
}
Check this fiddle.
In css file use...
div
{
display : block;
}
Which will give a break line for each div block and that feature is by default and don't use relative - absolute technique.
Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line.
Just do:
<div></div>
<div></div>
<div></div>
If that does not work, you probably need to put them in display: inline-block;
Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.
You can give margin to inner div.
On the page I'm laying out, there's a bunch of divs stuffed into each other. The HTML code looks something like this:
<div id="overlay">
<div id="main_section">
<div class="left">yadda yadda left sidebar</div>
<div class="middle">
<div id="header">yadda yadda header</div>
<div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
</div>
<div class="right">yadda yadda right sidebar</div>
<div class="clear"></div>
</div>
</div>
The main container is overlay, and it used fixed position, like so:
#overlay {
position: fixed;
width: 100%; height: 90%;
top: 0px; left: 0px;
background-color: rgba(255,255,255,0.5);
}
(I'm layering multiple backgrounds with various levels of opacity, which is why there is main_section, overlay, etc.)
Now, all the children use relative positioning, which works out fairly well. The problem occurs in #main_content. #main_section and .middle both have height: 100%, and as expected they go all the way down to the bottom of #overlay. Now, here's #main_content:
#main_content {
position: relative;
height: 100%;
width: 70%;
overflow-y: auto;
text-align: right;
}
This doesn't work as I want it to, since due to the image size the thing extends right down to the bottom of the page instead of to the bottom of #overlay. I've tried overflow-y: scroll and height: inherit, I've tried max-height: 100%, and I am ripping my hair out. Stackoverflow is my last hope before I get a heart attack!
I changed and added some properties since the full source code wasn't provided (colors only present to recognize relevant blocks). It appears to me that the mistake must be somewhere else in your CSS, because the underneath code works fine for me.
<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
position: fixed;
width: 100%;
height: 90%;
top: 0px;
left: 0px;
background-color: blue;
border: 2px solid green;
}
#main_section {
width: 100%;
height: 100%;
background: yellow;
}
.middle {
height: 100%;
width: 100%;
background: lavender;
position: relative;
}
#main_content {
position: relative;
height: 100%;
width: 70%;
text-align: right;
overflow-y: auto;
background-color: red;
}
img {
width: 700px;
height: 2000px;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="overlay">
<div id="main_section">
<div class="left"></div>
<div class="middle">
<div id="header"></div>
<div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
</div>
<div class="right"></div>
<div class="clear"></div>
</div>
The only time when I get the same problem as you, is when I set these #main_content {position:fixed;} or .middle {position:fixed;}. Are you sure #main_content or .middledidn't inherit a fixed position? Or maybe an unnoticed class added the property?
I found myself having the same problem.
There are answers to quite similar questions on SO. But all I found was only working either on the whole page/body or with a fixed height on the container. Some use float and positioning (absolute or relative does not really matter here). The overall tenor however is to use display elements, which I find to be both the most elegant and practical.
Below is my solution. You can place it in any container. It will adopt exactly to the container height and width, no overflow. Well as you can see it just combines an display: inline-block parent with a display: table child.
Note that if you add a display: table-caption the overflow will occur again (please leave a comment if you know the reason for this).
<div id="#place_me_anywhere"
style="display: inline-block;width: 100%;height: 100%;">
<div style="display: table;height: 100%;width: 100%;">
<!--<div style="display: table-caption;">
Height overflow will occur
</div>-->
<div style="display: table-row;">
<h1>Heading</h1>
</div>
<div style="display: table-row;background-color: pink;height: 100%;">
<!-- this row consumes all remaining height without overflow -->
<div style="display: table-cell;width: 10em;min-width: 10em;background-color: red;">
Just an example of some fixed width column/cell
</div>
<div style="display: table-cell;background-color: blue;">
takes the remaining width
</div>
</div>
</div>
</div>