I need to code the following block. The main block is responsive, and it has 2 other blocks inside, one of them has a static width, and other is dynamic (the img). How to make an image a fluid width, but the static height inside the main container?
the screenshot is here — http://joxi.ru/9xcvUtg5CbAxZuPPZH4
It needs 2 wrapper divs, but it seems to work:
http://jsfiddle.net/LSRPk/2/
The HTML:
<div class="bonsai-kitten">
any<br>content<br><br><br><br><br><br><br>height
<div class="rubberimage">
<div class="vertical-centerer">
<img src="kitten.jpg">
</div>
</div>
</div>
CSS:
.bonsai-kitten {
border: 3px solid red;
position: relative;
}
/* image area next to the sidebar */
.rubberimage {
position: absolute;
left: 200px; /* assuming fixed sidebar width */
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.rubberimage .vertical-centerer {
position: absolute;
left: 0; right: 0; /* means width: 100%; */
top: 50%;
line-height: 10000px; /* large enough? */
margin-top: -5000px;
vertical-align: middle;
}
.rubberimage img {
display: inline-block;
vertical-align: middle;
width: 100%;
}
Related
I'm using Swipe.js to create a page with several screens. Swipe requires a structure of 3 nested divs, with some style defined. I want to position an element 70% towards the bottom of one of the screens, but I'm finding that its Y position remains at the top when defined as a percentage. My guess is that the height of the containing div is somehow still 0, though I have set all min-height properties to 100%.
I'm testing on Chrome in desktop, for now. My stylesheet:
/* required by swipe.js */
.swipe {
overflow: hidden;
position: relative;
min-height: 100%; /* added this everywhere I could just in case */
}
.swipe-wrap {
overflow: hidden;
position: relative;
min-height: 100%;
}
.swipe-wrap > div {
float: left;
width: 100%;
min-height: 100%;
position: relative;
}
.page {
min-height: 100%;
}
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
/* element I want to position */
.myElement {
position: relative;
width: 200px;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
Body:
<div id="slider" class="swipe">
<div class="swipe-wrap">
<div class="page">
<div class="myElement">
<h1>I should be more than halfway down.</h1>
</div>
</div>
</div>
</div>
The result is that the inner div is centred horizontally, but vertically it's at the top (in fact, cut off because of the transform offset).
I have tried using flex and align-items: center. That does work. I'm not sure if I can use flex to define arbitrary relative positions, though.
Please check below example
.swipe {
overflow: hidden;
position: relative;
height: 100%;
}
.swipe-wrap {
overflow: hidden;
position: relative;
height: 100%;
}
.swipe-wrap > .page {
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
text-align: center;
}
.myElement{
display: table-cell;
vertical-align: middle;
}
.page {
min-height: 100%;
}
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
<div id="slider" class="swipe">
<div class="swipe-wrap">
<div class="page">
<div class="myElement">
<h1>I should be more than halfway down.</h1>
</div>
</div>
</div>
</div>
Is there a CSS equivalent to vmin that is relative to the smaller dimension of the parent element rather than the viewport?
I have a page with a navigation panel on the left, so only part of the viewport width is available to the main content, and I am trying to have a responsive square that does not overflow from the main <div>. I found the code for the responsive square as an answer to this question, but the square's height overflows when in landscape mode.
I could use JavaScript by listening to window resizing to recompute the square's width as the minimal dimension between the parent's width and height, but in my actual website, the parent is most of the time in display: none so it has no width and I would like to avoid the need to recompute the dimensions when it appears.
Here's a JsFiddle with an example and backgrounds to highlight the issue : https://jsfiddle.net/wy874pqv/4/.
Below is the code I used.
HTML :
<body>
<div id="main">
<div class="wrapper">
<div class="one-by-one aspect-ratio"></div>
<div class="content">
<div class="circle">
</div>
</div>
</div>
</div>
<div id="leftPanel">
</div>
</body>
CSS :
body {
height: 100vh;
padding: 0;
margin: 0;
}
div#leftPanel {
height: 100%;
width: 20%;
position: absolute;
left: 0;
margin: 0;
background: red;
}
div#main {
height: 100%;
width: 80%;
position: absolute;
right: 0;
margin: 0;
background: yellow;
}
.wrapper {
position: relative;
width: 100%;
background: rgba(0, 255, 0, 0.3);
}
.one-by-one.aspect-ratio {
padding-bottom: 100%;
}
.wrapper > .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 10%;
}
.circle {
position: relative;
height: 100%;
border: dashed 1px;
border-radius: 50%;
}
I have 2 divs in a row (with inline-blocks). One of them has a fixed width and the other one is supposed to automatically fill the left space. How can I do that?
My favorite solution is to use padding on the container block and absolute position on the fixed with object:
.wrapper {
padding-left: 100px;
position: relative;
}
.stay {
width: 100px;
position: absolute;
left: 0;
top: 0;
/* for demo */
height: 50px;
background-color: pink;
}
.fit {
width: 100%;
/* for demo */
height: 50px;
background-color: red;
}
HTML:
<div class="wrapper">
<div class="stay"></div>
<div class="fit"></div>
</div>
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
i would like to center a popup div how can i do that browser friendly????
this is the original a bit to the left.
<div class="popLayerWrapper">
<div id="addBookmarksLayer" class="popLayer" style="left:260px; padding:30px;">
<div class="closeLayer" >close</div>
<div class="layerContent"></div>
</div>
</div>
Not sure I understand which part you want to center, but assuming the whole thing:
.popLayerWrapper {
position: absolute;
width: 40%; /* could be anything */
left: 50%;
margin-left: -20%; /* half of width */
height: 40%; /* again, could be anything */
top: 50%;
margin-top: -20%; /* half of height */
}
I use this code to center an element in the center of the window viewport:
html {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
body {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
margin:0;
}
#center {
margin: auto;
}
You will find a full example at this link (Bredele CSS bundle). I think it should work for your popup.
Olivier