This is the HTML I have :
<div class="image">Image</div>
<div class="legend">
Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
This is the result I want :
This is what I tried :
.image {
height:100px;
background-color:red;
}
.legend {
transform:translateY(-50%);
background-color:blue;
width:300px;
margin:0 auto
}
.following {
background-color:yellow;
margin-top:-45px;
}
This is the result I got :
Problem is : I don't wan't to have this margin between legend and following text.
The whole attempt codepen is here
Question : any solution to get the desired result without JS ?
(for the record : this is a solution with JS)
Do you know the height of the element? Do you need it to be exactly 50%?
Here is an example with a fixed 50px-negative top margin:
.image {
height:100px;
background-color:red;
}
.legend {
background-color:blue;
width:300px;
margin:-50px auto 0;
}
.following {
background-color:yellow;
}
<div class="image">Image</div>
<div class="legend">
Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend, regardless of the height of the legend or the image</div>
Another option (which is probably not exactly what you are looking for) but it's a nice solution :)
.image {
height:100px;
background-color:red;
}
.legend {
background-color:blue;
width:300px;
margin:0 auto;
transform: translateY(-50%) translateX(-50%);
position: absolute;
left: 50%;
}
.legend:after {
content: attr(following);
display: block;
width: 100vw;
clear: both;
position: absolute;
background-color:yellow;
height: auto;
transform: translateX(-50%);
left: 50%;
}
.following {
}
<div class="image">Image</div>
<div class="legend" following="The following text should follow immediatly the legend, regardless of the height of the legend or the image">
Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
You can do this with simple positioning, wrapping your legend and the following text with a div and make its position:relative and following can be set as position:absolute
check this snippet
.image {
height: 100px;
background-color: red;
}
.legend {
transform: translateY(-50%);
background-color: blue;
width: 300px;
margin: 0 auto;
}
.following {
background-color: yellow;
position: absolute;
top: 50%;
width: 100%;
}
.container {
position: relative;
left: 0;
}
<div class="image">Image</div>
<div class="container">
<div class="legend">
Legend
<br/>width variable height
<br/>the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image
</div>
<div class="following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
</div>
Another solution with flexbox
.image {
height:100px;
background-color:red;
}
.item{
transform:translateY(-50%);
}
.center {
background-color:blue;
width:300px;
margin:0 auto;
}
.Aligner {
display: flex;
flex-direction:column;
}
.Aligner-item--top {
width:100%;
background:red;
}
.following {
width:100%;
background-color:yellow;
}
<div class="Aligner">
<div class=" Aligner-item Aligner-item--top image">Image</div>
<div class="item">
<div class="Aligner-item center">Legend<br/>
width variable height<br/>
the middle of the legend need to be exactly on the bottom of the image, regardless of the height of the legend and image</div>
<div class="Aligner-item Aligner-item--bottom following">The following text should follow immediatly the legend,regardless of the height of the legend or the image</div>
</div>
</div>
Hope this helps
Related
I have what seems to be a simple css question but having difficulty achieving. I have 2 divs that sit one on top of the other. I would like the combined height of both divs to be 100% but the top to be a static defined height. The bottom div will contain a list of data that will overflow to scroll. What is the best way to achieve this? Below is sample code for something close.
#container{
height:auto;
height:100%;
min-height:100%;
}
#top{
height:175px;
min-height:175px;
max-height:175px;
}
#bottom{
height:70%;
}
<div id="container">
<!-- top div set to 100px -->
<div id="top"></div>
<!-- bottom div dynamic height based on remaining real estate -->
<div id="bottom"></div>
</div>
You could use CSS calc(), so #bottom {height:calc(100% - 175px);}.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:calc(100% - 175px);
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
Or use CSS table layout if you need to support more browsers.
html, body {
height:100%;
margin:0;
}
#container {
height:100%;
width:100%;
display:table;
}
#top, #bottom {
display:table-row;
}
#top {
height:175px;
background:lime;
}
#bottom {
height:100%;
background:teal;
}
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
You can use height:calc(100% - 175px); for this:
http://jsfiddle.net/9ygz4pnj/
html,body,#container{
height:100%;
}
#top{
height:175px;
border:1px solid red;
}
#bottom{
height:calc(100% - 175px);
border:1px solid green;
}
You can achieve this by defining a height and min-height on your containers.
First of all you need to define a height: 100% in your body (and html).
Than you need to create a container div which will be the mother of your top and bottom divs.
Than use position: relative and min-height: 100% in your container div.
You can align your top div to top: 0 and left: 0 a definite height and position absolute.
You can align your bottom div to bottom: 0 and left: 0 a calc function and position absolute. For the content scrolling part in bottom div use overflow scroll.
JSFiddle Example
Right now, I am using a french (or german keyboard) which is quite hard for me to use. I will edit the answer with a more meaningful text when I return home.
This is a basic css file that you can use.
html, body { height: 100%; margin:0; }
.container {
position: relative;
min-height: 100%;
}
.top {
background: black;
color: white;
height: 200px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
background: yellow;
height: calc(100% - 200px);
overflow: scroll;
}
I want to create a layout of 3 columns. The center has a fixed width (e.g. 500px). The sidebars need to have a fixed position, so that their content remains always visible. This content has to be floated close to the middle column.
Here is what I came up with so far. Unfortunately, I couldn't fix the sidebars. The code is replicated below.
HTML:
<div class="wrap">
<div id="pixelLeft">
<div id="pixelLeftContent">
Column 1 has to be fixed, with liquid width.
It's content needs to be floated to left;
</div>
</div>
<div id="bannerCenter">
</div>
<div id="pixelRight">
<div id="pixelRightContent">
Column 2 has to be fixed, with liquid width.
It's content needs to be floated to right;
</div>
</div>
</div>
<div style="clear:both;"></div>
CSS:
*{
margin:0;
padding:0;
}
#bannerCenter {
background:#ddd;
width: 500px;
float:left;
height: 1000px;
}
#pixelLeft {
background:#999;
width: calc(50% - 250px);
float:left;
}
#pixedLeftContent {
width: 50%;
float:right;
}
#pixelRight {
background:#999;
width: calc(50% - 250px);
float:right;
}
#pixelRightContent {
width: 50%;
float:left;
}
#pixelLeft, #pixelRight {
height: 400px;
}
Try something like this, i dont think css supports % and px together... it may solve your problem..
Modify Your css like this:
#pixelLeft{
width: 50%;
float:left;
position: relative;
}
#pixelLeftContent{
background:#999;
float: right;
margin-right: 250px;
}
I have two divs displayed next to each other, left div is 20% width and right is 80% width.
Now left div contains image which is resized horizontally so it's height is unknown and keeps changing.
Now when this div resizes parent height increases or decreases, so when that happens i need my right div to resize as well, how can i do that?
jsFiddle
You can try the CSS3 table-cell value on the display property : http://jsfiddle.net/UJYyw/5/
With
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
You just have to apply a table-cell display on div.one and div.two
.one, .two{
display:table-cell;
}
Compliant browsers will adapt height of elements the way they do on td and th tags.
You could use jQuery to do this.
$('.container').css({'height':$('.one').height()});
See a jsFiddle here
When you change the value of .one in the css, it will update the size of .container, and thus, .two as well.
Here is the crossbrowser solution which uses just floats and couple of wrappers http://jsfiddle.net/RSPbD/
HTML
<div class="container">
<div class="wrap1">
<div class="wrap2">
<div class="one">text in div one</div>
<div class="two">text in div two</div>
<div class="clear"></div>
</div>
</div>
</div>
CSS:
.container{
border:1px solid;
width:70%;
margin:50px;
padding:10px;
}
.wrap1 {
width: 25%;
background: red;
position: relative;
left: 7%;
}
.wrap2 {
width: 200%;
position: relative;
left: 100%;
margin:0 -200% 0 0;
background: blue;
}
.one{
float: left;
width: 50%;
margin-right: -100%;
position: relative;
left: -50%;
}
.two {
}
.clear {
clear: both;
font-size: 0;
overflow: hidden;
}
I have 3 divs in one row
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
here's how its layed out
I need the middle div to stay a fix width, but the left and right divs to shrink in as the screen gets smaller, heres an example
how would I write out the css?
this is how I have it so far, and by the way the 3 divs are wrapped in another div#mid
#mid {
max-width: 100%;
min-height: 395px;
max-height: 395px;
position: relative;
background-color: #F00;
display: block;
}
#left {
min-width:35%;
min-height: 395px;
max-height: 395px;
background-color: #00F;
position:relative;
float: left;
}
#middle {
min-width:30%;
min-height: 395px;
max-height: 395px;
background-color: #3F0;
position:relative;
float: left;
}
#right {
min-width:35%;
min-height: 395px;
max-height: 395px;
margin:0;
padding:0;
background-color: #0FF;
position:relative;
float: left;
}
if anyone can help me out id really appreciate it, thanks in advance!
Here I've answered this question, you can do it like this : My Fiddle
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 300px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
Its very simple give fixed width to the middle div like width:300px...Hope this will be useful...
Very Simple.
Float the three divs.
Set the display property to 'inline-block'.
Set the width attribute of middle div.
Set max width attribute of the left & right div.
Here is the HTML markup I have tested with:
<body>
<div id="left">LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT ... LEFT CONTENT</div>
<div id="middle"></div>
<div id="right">
RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT ... RIGHT CONTENT
</div>
</body>
Here is a sample CSS:
#right,
#left {
background-color:green;
float:left;
display:inline-block;
max-width:20%;
min-height:20px;
}
#middle {
width: 60%;
float:left;
display:inline-block;
background-color:blue;
min-height:20px;
}
And here is the implementation: http://jsfiddle.net/3yEv3/
I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.
It should look something like this:
[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]
The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.
Thanks!
I think this may work for you:
http://jsfiddle.net/KR9zj/
Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.
Use display:table; and display:table-cell;. No need to struggle with float:x;.
HTML:
<div id='container'>
<div id='first'>a</div>
<div id='second' class='fifty'>b</div>
<div id='third' class='fifty'>c</div>
</div>
CSS:
#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }
Live example: http://jsfiddle.net/j25wK/
Will this work?
Demo: http://jsfiddle.net/BVhCZ/
As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px
Code:
<div class="left">LEFT</div>
<div class="content">
<div class="content-left">CONTENT LEFT</div>
<div class="content-right">CONTENT RIGHT</div>
</div>
.left {
position: absolute;
top: 0;
left: 0;
width: 40px;
background-color: #ddd;
}
.content {
margin-left: 40px;
}
.content .content-left {
float: left;
width: 50%;
clear: none;
background-color: #fdd;
}
.content .content-right {
float: right;
width: 50%;
clear: none;
background-color: #ddf;
}