I want to create a header with 2 divs in it. The left div needs to be the same height as the right one, but the right one can scale based on its contents.
The left div's contents need to be vertically aligned to the middle.
I tried something like this:
<header>
<div id="test1">
<div>LOGO</div>
</div>
<div id="test2">
<h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1>
</div>
</header>
Use display: table-cell;
Working Demo
Edit:
In case if you want jQuery Solution it works on all browsers
You can fake this using overflow, padding and margins. It's completely cross browser compatible and doesn't need any JavaScript or anything. Just CSS. For example:
.header {
overflow: hidden;
}
.test {
background: red;
padding-bottom: 2000px;
margin-bottom: -2000px;
float: left;
width: 100px;
margin-right: 20px;
}
DEMO
There is also always faux cols (using a background image) but this is a better method that doesn't need images.
If you don't mind a bit of javascript:
$(document).ready(function() {
setHeight($('#test1'), $('#test2'));
// When the window is resized the height might
// change depending on content. So to be safe
// we rerun the function
$(window).on(resize, function() {
setHeight($('#test1'), $('#test2'));
});
});
// sets height of element 1 to equal the height of element 2
function setHeight(elem1, elem2) {
var height = elem2.height()
elem1.css('height', height);
}
DEMO
display: flex;
in the parent container works for me
Related
I want to make the button always aligns vertically on the middle of the image responsively. I can make the image responsive using .img-responsive, however I can't make the arrow to be always on the middle of the image. I suspect the issue is because I can't make the height of the arrow's div to be equal the height of the image. Any way to do so?
Here is my jsFiddle..
PS: for those who can come up with better words please change the title.. ^^
CSS only solution. Using the display table and table-cell combo, you can achieve what you are looking for. I had never really tried it before, as far as I know, but searched around a bit and found a solution which gave me a good starting point to achieve what I needed.
The trick is to have a container which will possess the display table property. Inside that wrapper, you will have all your other elements, which will possess the table-cell property, in order to have them behave properly and stack themselves next to each other, as table-cell would to do.
By giving your table-cells a 100% height, they will adapt themselves to the height of the wrapper, giving you the chance to use the handy little table property going by the name: vertical align. Use the middle vertical align property to center perfectly your nav buttons.
Give your image the max-width 100% property for proper responsive behavior. But don't use bootstrap's own image responsive class because it contains css properties we don't want and that messes up our layout.
I reworked the html a bit, so that each element align perfectly, in the correct order.
WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Here's a simple solution in Javascript/Jquery. The trick is to adjust the position of each NAV buttons according to the height of the image each time the browser id resized. Dividing the image height by 2 will get you the center of the image, aka the position where you will want your buttons to be. Using only this value will no be enough, you also need to get the center value of your nav buttons. Substracting each values will give you the real position value for your buttons. The ScreenResize function will then update the position each time the image is scaled responsively.
$(function(){
//Call On Resize event on load
screenResize();
//Bind On Resize event to window
window.onresize = screenResize;
});
function screenResize() {
//Adjust Nav buttons position according to image height
$('.nav_btn').css({
'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
});
}
Also, change the line-height of your buttons to this, it will help:
.nav_btn p{
line-height: 1.25;
}
Finally, use Media-Queries to change buttons font-size and line-height if necessary. Also, like user Valentin said, using images for the nav buttons could also be easier, you wouldn't have to use media-queries.
Example JSFIDDLE
Here is my Question I have an HTML like this
<div class='A'>
<div class='B'>Hello World</div>
This div Height is more than first one due to the content size
</div>
now I want to get the height of Parent div with class 'A' and that height has to be given to the div with class 'B'
only using CSS3. is it possible? Some-body please help me.
Thank you...
CSS is not a programming language so, no, you cannot do this as you state it.
As mentioned before CSS is not a programming language you cannot achieve that with it however you can use jQuery instead:
$(document).ready(function(){
$(".B").css("height", $(".A").height());
});
Or you can do this with CSS:
.A {
height: 300px;
}
.B {
height: inherit;
}
If you're explicitly setting the height of the parent, you can set the child's height to be 100% to achieve this effect. View on JSFiddle.
css
#parent {
background: #eee;
height: 200px;
}
div div {
background: #aaa;
height: 100%;
}
HTML
<div id="parent">
<div>lalala</div>
</div>
If you're not explicitly setting the height, you'll need to specify the question more. Divs are block level elements and want to take up an entire row to themselves. The code you posted will result in the child div and the text of the parent being on different rows. Because of that, it's hard to know what height you're looking for...maybe if the parent just had text? And then, what do we do with the div in relation to the text? Overlap it? Or push the div out the bottom of the parent?
If you want to set the same height to upper and to lower text
You can add to parrent
.A
{
display: table;
}
And you can add to child
.B
{
display: table-row;
}
What i have:
HTML:
<div class="container">
<div class="text">
Some long text
</div>
<div class="extendable">
<img>
</div>
</div>
CSS:
.container {
float: right;
min-width: 10em;
padding-left: 1em;
.text {
padding: 0.3em;
}
}
Every block has dynamic width and height.
http://jsfiddle.net/vZ4eA/
What i want:
.text shouldn't be able to extend .container if the content gets too big. There should be a forced line break.
.extendable on the other hand should make container bigger if the content exceeds the width (behave normally).
You need to set a fixed width on .text and then use word-break:break-all;
Using jQuery you can set the width of .text to be that of .extendable.
var exWidth = $('.extendable').css('width');
$('.text').css('width', exWidth);
http://jsfiddle.net/vZ4eA/16/
Edit: CSS Only
You could try placing .text inside .extendable.
See here: http://jsfiddle.net/vZ4eA/18/
EDIT 2: CSS:
With some help from this answer https://stackoverflow.com/a/7231607/1399670 I have updated the fiddle to match your requirements.
http://jsfiddle.net/vZ4eA/20/
You can use a max-width for the text along with nowrap
.text{
padding: .3em;
border: 1px solid red;
max-width: 200px;
word-break: break-all;
display: block;
}
Working Example
EDIT:
To respond to one of the comments below, the max-width should probably be a dynamic value in order to work with the dynamic width of the container. You could easily implement this behavior with javascript or jQuery
jQuery
I recommend you check out this plugin to handle the re-sizing of your div
$("#div").resize(function(e){
$(".text").css({"max-width" : $(this).css("max-width") });
});
The only method I can think applicable here would be to set max-width on .text
You'd probably have to dynamically update the max-width of .text as .container resizes; specifically, on page load, and on viewport resize. You can do this using jQuery.
I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want to believe it is..
Let's say the wrapper width is 1000px.
Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..
Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?
Graphic of what I am trying to accomplish:
The very closest I could come up with was to use display: table; and table-cell. This creates the dynamic effect you're looking for, but I don't think you can get your desired effect without setting an explicit width to the center element.
HTML:
<div id="wrap">
<div id="left">
Left
</div>
<div id="center">
center
</div>
<div id="right">
Right
</div>
</div>
CSS:
#wrap
{
width: 1000px;
display: table;
}
#wrap div
{
display: table-cell;
border: 1px solid #000;
width: auto;
}
#center
{
padding: 0 30px;
text-align: center;
}
You can check out my attempt here, it has some buttons for you to see the different states, width on/off and add text etc. (the jQuery has nothing to do with the solution)
I think this is as close as you're going to get with pure CSS.
Good 'ole tables to the rescue:
http://jsfiddle.net/hgwdT/
Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:
http://jsfiddle.net/XXXdB/
The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.
I also confirmed that this solution works in IE8 and FF, in addition to Chrome.
This not the most elegant solution, but it works. I wanted to go the pure CSS route, but couldn't figure it out. Nice work, jblasco and Kyle Sevenoaks, on figuring that out!
Here is my jsFiddle demo. If you don't mind using a little JavaScript though (utilizing jQuery in my example):
HTML:
<div id="wrapper">
<div class="side"></div>
<div id="middle">One line of text.</div>
<div class="side"></div>
</div>
CSS:
#wrapper {
margin: 0 auto;
width: 1000px;
}
#wrapper div {
float: left;
height: 300px;
}
.side {
background: #ddd;
}
#middle {
background: #eee;
padding: 0 30px;
text-align: center;
}
JavaScript:
var adjustSize = function(){
// Declare vars
var wrapper = $('#wrapper'),
middle = $('#middle'),
totalWidth = wrapper.width(),
middleWidth = middle.width(),
middleOuterWidth = middle.outerWidth(),
remainingWidth = totalWidth - middleOuterWidth,
sideWidth;
if(remainingWidth % 2 === 0){
// Remaining width is even, divide by two
sideWidth = remainingWidth/2;
} else {
// Remaining width is odd, add 1 to middle to prevent a half pixel
middle.width(middleWidth+1);
sideWidth = (remainingWidth-1)/2;
}
// Adjust the side width
$('.side').width(sideWidth);
}
I need in the same HTML row to have 2 divs: one will stay the same width while the other's size will be increased once the web page is being increased by the end user.
So I defined one div and inside 2 divs like this:
<div>
<div style="float:left" width="20px">first div</div>
<div style="float:left" width="100%">first div</div>
</div>
However it does not work!
How can I create 2 divs in the same line that one will be fixed size and the other one relative?
Do I win?
Live Demo
Live Demo #2 (using classes and with support for more than one instance of this)
HTML:
<div id="divHolder">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
CSS:
#divHolder {
overflow: auto
}
#div1 {
float: left;
width: 20px;
background: #ccc
}
#div2 {
margin-left: 20px;
background: #888
}
Take a look at this: http://jsfiddle.net/Shaz/GaZYt/2/
The left box will change size depending how much horizontal space is left. The right box will always have a minimum and maximum width of 200px.
Try setting display:inline on the div elements. The default display value for a div is block (which causes them to appear on seperate lines). Here is an example on js fiddle
I believe you may need to use Javascript to handle this case.
$(window).resize(function() {
var $left = $('#left');
var $container = $('#container');
$right.width($container - $left);
});