I have one div that has a dynamic height and another div that is a float. Is there a way in css I can link div2's height with the height of div1?
I think it's that you want : http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
It's possible that you can wrap both divs in a 3rd div(wrapper) and then set the height of div2 to 100%
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
<div style="clear: right"></div>
</div>
.div2 { float: right; height: 100% }
Related
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
I have a container DIV with random number of children inside.
I always want children to fill 100% width of parent. I tried using do display:table-cell and other CSS tricks but all in vain.
Here is fiddle.
HTML
<div class="wrapper">
<div class="panel">1
</div>
<div class="panel">2
</div>
<div class="panel">3
</div>
<div class="panel">4
</div>
</div>
Add display:table to the .wrapper
http://jsfiddle.net/pA3fj/2/
I'm adapting the hero template from bootstrap.
Nested in the hero-unit div I would like to have two divs to be rendered in wide screens, side by side, like:
|text 30% container width||picture the rest of container width|
and in narrow screens (smartphone) stacked:
|text full container width|
|picture full container width|
Any idea?
Use media queries to create different styles for different sized screens.
For the full size screen you could do:
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
#left{
float: left;
width: 30%;
}
#right{
overflow: hidden;
}
The above layout will have the left div floating to the left, with a width of 30% and the right div will take up the remainder of the space.
For the mobile screen, your CSS will vary slightly.
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
.cont{
width: 100%;
float: left;
clear: both;
/* Margins, padding, etc. */
}
Can't you just use the built in grid system?
<div class="hero-unit">
<div class="row-fluid">
<div class="span3">text</div>
<div class="span9"><img src="img.jpg"></div>
</div>
</div>
Im trying do this
<div>
<div style="width:50%;"> first div </div>
<div style="width:50%;"> second div </div>
</div>
Sometimes dynamically first or second div will not be displayed.
when first div is not displayed i need second assume width 100% and vice versa.
Can i do this just with css? min-weigth or max-width or something like that?
You can use :only-child pseudo class
.childDiv
{
width:50%;
}
.childDiv:only-child
{
width:100%;
}
HTML
<div>
<div class="childDiv'> first div </div>
<div class="childDiv'> second div </div>
</div>
Try using the auto margin CSS properties:
.myClass
{
margin:0px auto;
width:50 //You can set this to whatever or take it out
}
And add to HTML
<div>
<div class="myClass'> first div </div>
<div class="myClass'> second div </div>
</div>
I'm trying to position two panels and just can't get it to work...
I have a container-page wrapping two panels, each with it's own page. I want to position the panels side by side using float.
This is my CSS:
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: static;}
and HTML
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
</div>
I have to use position:relative for the left panel and position:static for the right panel. Strangely this works in JSBin but in my actual page, the right panel with position:static always has 100% width covering the whole screen.
Any hints on what I may be doing wrong?
Thanks!
div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it's children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.
On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: relative; float: left;}
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div style="clear:left;"></div>
</div>
Try floating both of the panels? As of right now only the left one is floated... try floating both of them to the left and then putting the correct amount of margin between them to line them up like you want them. Or even floating one left and the other right would probably work.
Add this to your CSS,
div.clear-both {clear: both;}
And change your HTML to this:
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page"
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div class="clear-both"></div>
</div>