I have a nested structure where a div contains ul which in turn contains div. My requirement is to have content of most inner div display beyond the width (boundary) of ul or outer div.
/* Positioning */
#box1 {
position: absolute;
overflow: hidden
}
#box2 {
position: relative
}
#box3 {
position: absolute;
top: 10px
}
/* Styling */
#box1 {
background: red;
padding: 5px;
width: 125px
}
#box2 {
background: blue;
padding: 2px;
width: 125px;
height: 100px
}
#box3 {
background: green;
padding: 2px;
width: 500px;
height: 150px
}
<div id="box1">
<ul id="box2">
<li>
<div id="box3" />
</li>
</ul>
</div>
Refer https://jsfiddle.net/ob641d3s/
Note: This was working on Chrome 47 however it stopped working from Chrome 49 onwards on Mac. This is still working on Chrome + Windows
Remove the overflow: hidden property on the #box1 and it's good :)
Fiddle
Thanks for response everyone,
I was able to find a page that explains the solution very clearly and my problem is resolved following the steps described at following page
https://css-tricks.com/popping-hidden-overflow/
Related
I'm making a website and I've got this sort of a menu that looks like this:
Image
I want the lightblue part with the buttons to be centered vertically and to the right in the grey part not below Pepito123.
The code for the HTML is this:
#fotoUsuario {
width: 150px;
height: 150px;
border-radius: 10px;
}
.contenedor {
display: flex;
overflow: hidden;
}
.perfilUsuario {
background-color: rgb(211, 211, 211);
width: 80%;
height: 500px;
margin: auto;
border-radius: 10px;
padding: 15px;
}
.menuPerfil {
height: 80%;
width: 20%;
float: right;
background-color: rgb(173, 216, 230);
border-left: 1px solid rgb(0, 0, 0);
}
<section class="contenedor">
<div class="perfilUsuario">
<img id="fotoUsuario" src="http://coyotechronicle.net/wp-content/uploads/2015/02/facebook-logo.jpeg">
<h1>Pepito123</h1>
<div>
<ul class="menuPerfil">
<li><button type="button">Plan de Estudio</button></li>
<li><button type="button">Materias</button></li>
<li><button type="button">Otra cosa</button></li>
</ul>
</div>
</div>
</section>
JSFiddle
.perfilUsuario > div{
position: relative;
left: 40%;
}
Do this, it'll center the div. Next time you should explain your problem better
I moved the class of menuPerfil from the <ul> element to it's parent div and then slightly modified the height and width of menuPerfil from 30% to 40% respectively.
See Fiddle
In general, you can position the child element vertically within the parent element using positioning and transform. See the example:
.parent {
width: 100%;
height: 300px;
background-color: grey;
position: relative;
}
.child {
width: 100px;
height: 50px;
background-color: red;
position: relative;
top: 50%; /*This will push the child down from the TOP of the parent element. However, origin point of the child is set to its top (imagine top border laying perfectly at the middle vertically), therefore we need the next step, which is: */
transform: translateY(-50%); /* This will push the element UP for the half of it's height. */
margin: 0 auto; /* If you want to center it horizontally as well. */
<div class="parent">
<div class="child"></div>
</div>
Note: it's important that both parent and child are positioned for this to work.
I gave the general/universal example instead of applying it to your specific code, because I also (like few others) cannot say I perfectly understand how exactly did you want to position your elements in particular, but hopefully this will help you. Also, I'd target the div which contains the UL, and not the UL itself.
Let me know if you need help applying this solution to your problem. Good luck.
One example is better than a thousand words, so here you go:
https://jsfiddle.net/jesuxapo/os53cyc1/
As you can see, the height is responsive, but not completely. The problem is the <div id="k"> with fixed height of 150px. Try to play with it and I think you'll understand exactly what I mean. I want to get rid of this 'problem' somehow.
I could use the calc() of the css3, however it's not cross-browser(especially android and IE8-9).
Perhaps there's some other solution for this using html and css languages?
You may use the display:table properties (IE8 and later):https://jsfiddle.net/os53cyc1/1/
it will grow if content is more than 100vh all together
html, body {
padding: 0;
margin: 0;
height: 100%;
background: #333;
font-weight: bold;
color: #fff;
}
body {
display:table;
width:100%;
}
body>div {
display:table-row;
}
div {
border: solid 2px #FFFF00;
}
div#a {
position: relative;
background: #800000;
width: 100%;
height: 100%;
}
div#b {
position: absolute;
top: 0;
}
div#c {
position: absolute;
bottom: 0;
}
div#k {
height: 150px;
background: #008000;
}
<div id="k">
Hello, I'm K and I just broke your code
</div>
<div id="a"><br><br><br><br>
This is relative div with height of 100% and max-height of 500px
<div id="b">
This div is aligned to the top of the Red div
</div>
<div id="c">
This div aligned to bottom of the Red div
</div>
</div>
I have a DIV like below
<div class="parent">
<div class="fixedHt"></div>
<div class="fluidHt"></div>
</div>
I have written CSS like below
.fixedHt{
height:30px;
}
.fluidHt{
margin-top:30px;
}
I want to achieve the same with columns I can achieve with floats, how can I achieve this in rows?
jsFiddle Demo
HTML:
<div class="parent">
<div class="fixedHt small"></div>
<div class="fluidHt streched"></div>
</div>
CSS:
.streched {
position: absolute;
top: 30px;
bottom: 0;
left: 0;
right: 0;
}
For browsers who support CSS3, use calc function (no need for absolute positioning):
see this Fiddle
HTML:
<div class="parent">
<div class="fixedHt"></div>
<div class="fluidHt"></div>
</div>
CSS
.parent {
height: 300px;
width: 300px;
border: 3px solid #000;
}
.fixedHt
{
height: 30px;
background-color: red;
}
.fluidHt
{
height: calc(100% - 30px);
background-color: blue;
}
Tested on: IE10, IE10 using IE9 mode, FF, Chrome
Edit:
CSS3 is not supported in IE8, so instead you can use height: 270px; in the .fluidHt rule (that is only if the fixed height is not a problem for you) like this Fiddle [Works with all Broswers],
or you can apply a Script that fix the second div's height dynamically. like this Fiddle [Works with all Broswers]
I write here another answer, that don't use calc() and don't relay on the fixed height of the first div, so even if it's height is changing, the second will always span the rest of the container.
also: it has better browser support (IE8+ & all major browsers), and its Pure CSS.
Check this Working Fiddle
HTML: (same)
<div class="parent">
<div class="fixedHt"></div>
<div class="fluidHt"></div>
</div>
CSS:
.parent
{
height: 300px;
width: 300px;
border: 3px solid #000;
}
.parent:before
{
content: '';
height: 100%;
float: left;
}
.fixedHt
{
height: 30px; /*can be any height*/
background-color: red;
}
.fluidHt
{
background-color: blue;
}
.fluidHt:after
{
content: '';
clear: both;
display: block;
}
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you
So, I have a sidebar on my site. It can vary dynamically in height. I want to have a 1px wide border to the right, but I don't want it to be as tall as the container; it should only be 70% that height. Also, it should be vertically centered to the middle of the container.
How can I do this? Most of the ways I've seen require the border's height to be defined, but I am not able to do that. Is this possible with just CSS? If not, how can I use JavaScript to perform this? Thanks!
I've got an idea, it's supported by FF6 and IE9 + Chrome and Opera 11:
html
<div id="container">
<div class="border_r"></div>
contents
</div>
css
#container {
height: 356px;
background: #eee;
position: relative;
}
.border_r {
border-right: 2px solid red;
height: 70%;
position: absolute;
right: 0px;
top: 15%;
}
jsFiddle ... I have no idea if it will work anywhere else
You can create a "pseudo-border" using CSS Pseudo-elements. Though the browser support (particularly in the IE department) is not exactly stellar, it's the more semantic (and recommended, if you can drop <IE7 support) way to do it.
Instead, if you don't mind the extra non-semantic element, you can simply do it using an extra <div> inside of your sidebar:
HTML
<div id="example-sidebar">
<div id="example-border"></div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
CSS
#example-sidebar{
background-color: yellow;
color: black;
height: 400px;
margin-left: 1px; /* Required for 70% height border */
position: relative; /* Required for 70% height border */
width: 150px;
}
#example-border{
background-color: red;
height: 70%;
position: absolute;
left: -1px;
top: 15%;
width: 1px;
}
Try this:
.box:before
{
width: 1px;
height: 70%;
position: relative;
float: right;
background-color: black;
display: block;
content: '';
}
http://jsfiddle.net/uxNar/