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.
Related
I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.
I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-inner">
<h1>Test2</h1>
</div>
</div>
</div>
</div>
</div>
Any help would be very appreciated! I've been banging my head against the wall for hours.
Fiddle here, I highlighted the problem areas with a comment:
http://jsfiddle.net/kbj8dd0e/6/
Sure you can add padding. Just add it to the .box.
Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)
All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.
Or am I missing something here?
I have a problem with a Bootstrap well going beyond its containing element (here a class="row" , itself in a class="span4").
It is clearly visible in the JSFidle I did here: http://jsfiddle.net/sebastien_worms/fc42w/2/
And fullscreen : http://jsfiddle.net/sebastien_worms/fc42w/2/embedded/result/
Extract of the code is here:
<div class="span4 pull-right">
<div class="row">
<div class="well" style="width:100%;">
<b>This is the well that bothers me !</b><br> It goes beyond the right end of the screen ... And if you click "inspect element", you can see it goes beyond the right-end of its containing "span4" and "row"...
</div>
</div>
</div>
You can see the well going beyond its containing element (and the screen) when playing with you browser's window size (around 1000px wide is the most visible).
... And obviously, I can't set the well in the same div as the span: http://jsfiddle.net/sebastien_worms/fc42w/3/
How should I do to have the well fill 100% (only) of the span4 ?
It's beacuse your padding, just add this
.well {
box-sizing: border-box;
}
It will work in any modern browser and IE8 and newer
I tried to setup a navbar which is always at the very left of the screen, and a main container which is always right of the navbar. Currently it is always below the navbar. The main container (titled with dashboard) should always be right of the navbar, even if the screen is too small. In the main container there is currently only one table shown. The width of this table should be fluid.
Here are my jsfiddle resources:
Source
Result
It would be great if I could set the width when the main body is not shrinking anymore, something like a min-width for the main container.
Would appreciate any help.
Sidebar must be inside the container to get it and the "dashboard" side by side.
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<!--Sidebar content-->
</div>
<div class="span8">
<!--Dashboard content-->
</div>
</div>
</div>
To prevent resizing under certain screen sizes, just get a custom Bootstrap here, unchecking that sizes you don't want to support.
A bit of head scratching going on here, so any pointers would be much appreciated!
I have a header div that has the property overflow:hidden. On the left of this header is the page title, and on the right a number of images. This works perfectly well and everything shows as it should.
However, I now need to wrap these images around div tags (they will become clickable, and updated via Ajax - so I need to define the postback div for each image). As mentioned, without wrapping the image around a div tag, they show fine. However, as soon as I add the div tags, they disappear (though still show in the page source). The div tags take the simple form of and no styling is associated with them.
I'm sure I'm missing something here, but for the life of me it's totally bypassing me right now!
Thanks :-)
Your question is bit unclear for me, any way if i understood your question
If you need to have click event you can use asp:ImageButton to hold the image.
if you really need to use div
<div class="header"> // this is the one with overflow hiddden
<div class="left"> // this div holds the page title ; float:left
<h1>Title</h1>
</div>
<div class="right"> // this div to hold the divs which contain images
// if all your images are same height set the same height to this div and float:right
<div class="image"> // this div holds the image; make float:left set height and width
<img/>
</div>
<div class="image">
<img />
</div>
<div class="image">
<img />
</div>
</div>
</div>
Hope this helps
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.