i use bootstrap for fluid grid system.
i have a div with class .span6 and i set heigth:200px for this.
now i want when window is re-sizing the div's height decrease like as width.
http://jsfiddle.net/prince4prodigy/X8zu8/
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
That depends what will be in the divs and how the site is designed...
If you just want to decrease the size than you have to make it via JS, or start positioning your elements absolute.
If the site is designed to be 100% height of the window, you can make the elements absolute and it will be easy.
But if the site isn't 100% of the window height, than the only solution is via javscript.
I don't understand why to use JS. On window re-sizing, i would probably prefer media querys for the div's.
Related
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
I'm making a slider using css3 transitions. Each slide has a different height (it could contain text/images/videos/mix all of it), width is the same but responsive (100% of the parent).
<div class="slider">
<div class="slide_container">
<div class="slide current">Different amount of content</div>
<div class="slide">Different amount of content</div>
<div class="slide">Different amount of content</div>
</div>
</div>
At the moment I make it work only with absolute positioning and fixed height.
Please see http://jsfiddle.net/j6eWG/1/
Is there any way I can wrap my .slider around slides that will not have fixed height?
I need to make .slider the same height as .slide.current (http://jsfiddle.net/j6eWG/2/)
Maybe there is some transform property I can use?
I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :
Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net)
The rightmost part of the content, will occupy the remaining part of the window (fluid)
I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space) :
<div class="container-fluid" style="">
<div class="row-fluid" style="">
<div class="span3" style="">
</div>
<div class="span9" style='background:#fff;'>
</div>
</div>
</div>
Any ideas? How would you go about this?
Not totally sure but I think this might work...
Put height:100% on the html and body elements of your page.
Then give the element that you want to be the full height of the page a min-height:100%
Hope that helps.
Ok, I am using the 960.gs and for some design purposes I want a 100% width line with my header elements. But I can't get it to work properly without having to include multiple containers, wich I don't exactly favor.
So my question is this; how can I have a 100% width div on the top of my page, and have the content of that div follow the grid system?
Thank you in advance!
If I guessed this is what you want:
<div style="width: 100%; ...">
<div class="container_12">
your grid layout here
</div>
</div>
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.