I am trying to arrange a group of divs on-top of each other. The top div must be static place in the top-left (width = 100%) and not affected by the vertical scrolling that the centre div will have. I works somewhat as I want, except that the container div also got a vertical scroll that I don't want. Now I have two overlapping vertical scrollbars, one for the container div and one for the centre. I also use JQuery mobile on the page if that could help me arrange the divs.
How can I make my centre div (id=scroll) the only div that is scrollable and have my top div (id=fixed) at a fixed position without a scrollbar (no overlap of vertical scrollbars) and not be affected by page scrolling?
<div id="conatainer" style="overflow: hidden; height: 100%">
<div id="fixed" style="position: static; top: 0%; overflow: hidden; height: 50%">
<div id="map_canvas" style="width:100%; height: 85% ;min-height: 180px">
...
</div>
<div id="scroll" style="position: absolute; overflow: auto; overflow-x: hidden; height: 50%">
...
</div>
</div>
This is a standard jQuery Mobile template with a fixed header and content that scrolls: http://jsfiddle.net/Gajotres/yWTG2/
<div data-role="page" id="index">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
And here's a working example: http://jsfiddle.net/Gajotres/Rf7NA/
For a header to be fixed it needs data-position="fixed" attribute.
Also in case you WANT to use only a layout and not jQuery Mobile styling take a look at this ARTICLE or find it HERE: Search for the chapter: Methods of markup enhancement prevention.
Related
I'm using Bootstrap 3 with a 2 column layout. The right column is my sidebar. I have different backgrounds for each and I can tell that my sidebar column does not continue all the way down to the bottom of the main content wrapper. In most cases, the main content, which is on the right, is longer than the sidebar content, but I don't want to see the background of the main content area, but the sidebar content background continued.
Here's the jsfiddle that I modeled after in order to achieve a 100% height sidebar, but I can't seem to get it to work.
http://jsfiddle.net/34Fc5/1/
Here's the gist of my code:
<div id="content" class="clearfix row">
<div id="main" class="col-sm-8 clearfix" role="main">
<article id="post-1728" class="post-1728 page type-page status-publish hentry clearfix" role="article" itemscope="" itemtype="http://schema.org/BlogPosting">
<header>
<div class="page-header"><h1 class="entry-title" itemprop="headline">About</h1></div>
</header> <!-- end article header -->
<section class="post_content clearfix" itemprop="articleBody">
<p class="lead">LENGTHY CONTENT</p>
</section> <!-- end article section -->
<footer>
</footer> <!-- end article footer -->
</article> <!-- end article -->
</div> <!-- end #main -->
<div id="sidebar1" class="col-sm-4" role="complementary">
<div class="sidebar-content"></div>
</div>
<div style="clear:both">
</div>
Here's my jsfiddle:
http://jsfiddle.net/8yvgh7xj/
It would be great if someone has had this issue before. I see plenty of LEFT sidebar 100%, but no right sidebars with Bootstrap.
Thanks.
Sidebar on the left
On option would be removing the sidebar from normal flow by absolute positioning, and expanding its height (the margin box) by top: 0, bottom: 0 declarations with the respect to the wrapper, .wrap.
.sidebar {
position: absolute;
top: 0; bottom: 0; left: 0;
}
.wrap {
position: relative;
min-height: 100%;
}
Then we need to push the right column containing the <article> to the right by col-xs-offset-4 offset class - based on the size of the sidebar - as follows:
EXAMPLE HERE
<div class="col-xs-8 col-xs-offset-4"> ... </div>
Sidebar on the right
Considering the same approach, the only thing should be changed is to alter left: 0 to right: 0.
Also there's no need to have offset class on the other column; Therefore you could remove col-xs-offset-4 as well.
UPDATED EXAMPLE
<div class="col-xs-8"> ... </div>
I feel your pain. I have run into this problem and there don't seem to be many elegant fixes for this issue. A few approaches that can be taken include:
Use padding and negative margin to increase the height (see article below)
http://www.positioniseverything.net/articles/onetruelayout/equalheight
I have have used this in previous projects and it works very nicely - there are some issues that are addressed in the article - but I have found this technique to be reliable.
Use Javascript to increase the height of the div at runtime
you may see a flicker whilst the heights of the divs are calculated and adjusted.
Use tables
doesn't fit in well with the bootstrap paradigm of laying out page - may have issues with responsive design
The following question CSS - Expand float child DIV height to parent's height addresses the problem in some detail.
your css becomes:
#content {
overflow: hidden;
}
#sidebar1{
background-color:#eee;
background-repeat: repeat;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#sidebar1 .sidebar-content{
width:100%;
padding: 5px;
margin:0;
position:relative;
}
I've got one wrapping div and two divs with different height inside them. How can I make sure that the wrapping div is always at least the height of the bigger div inside it because for some reason I see that when in the .leftMenu div there is a lot of info (both divs are dynamically filled with info) - the wrapping div stays as the height of .centerBody! (I've put on purpose the styles of divs inline so its quicker)
My code:
<div id="importPartUpdate">
<div class="leftMenu" style="position: relative;margin-top: 10px;width: 15%;clear: both;display: inline-lock;float: left;" />
<div class="centerBody" style="margin-top: 10px;margin-left: 0px; display: inline-block; position: reative;width: 83%;padding: 5px;"/>
</div>
Clear your div floats using clear:both CSS property.
<div id="importPartUpdate">
<div class="leftMenu" style="position: relative;margin-top: 10px;width: 15%;clear: both;display: inline-lock;float: left;" />
<div class="centerBody" style="margin-top: 10px;margin-left: 0px; display: inline-block; position: reative;width: 83%;padding: 5px;"/>
<div style="clear:both"></div>
</div>
FIDDLE DEMO
You can use display:flex;. Check this link: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here's the working fiddle: http://jsfiddle.net/NhKb6/2/
I'm trying to get my bootstrap carousel acting as the background in a fixed position. In my actual code I've got it to a full width and height that fills the screen, but it only stays in one place. I added 'position: fixed' to a class on my section containing the carousel so it'd float at the front and I was going to z-index it to behind the rest of my content, but it just completely disappears?
I've replicated the problem in this simplified example:
http://jsfiddle.net/v9FMw/4/
HTML
<div class="fill bg-green">
<div>content section (scroll down)</div>
</div>
<div class="fill bg-white">
<div>content section (further x)</div>
</div>
<div class="fill bg-green fixed-section"> <!-- fixed section declared here -->
<-- carousel code -->
</div>
<div class="fill bg-white">
<div>content section</div>
</div>
CSS:
.fill {
width: 100%;
height: 100%;
position: relative;
}
.fixed-section {
position: fixed; /* controls fixed carousel positioning here */
}
You have to give the container top: 0.
.fixed-section {
position: fixed;
top: 0;
}
Updated Fiddle
I am trying to use Twitter's bootstrap CSS framework and within there so far only the grid layout.
Now I simply want to align the content of each grid cell <div> to the bottom.
I am obviously no CSS buff at all.
This is the html:
<div class="container">
<div class="row">
<div class="span4">
<img src="someprettyhighimage.gif"/>
</div>
<div class="span8">
some text/links that need to be bottom aligned
</div>
</div
</div>
</div>
I cannot find a way to make the second column <div> with the text (and/or the first) be bottom aligned.
Does anybody know the css magic I would need for that?
(Or also how I would make both <div>s bottom-aligned?
Thanks a lot,
Sebastian
You need to set the position property of the class="row" div to relative and then set the position property of the div containing text to absolute and the bottom property to 0.
.row { position: relative; }
.span8 { position: absolute; bottom: 0; }
Check it out on jsfiddle:
http://jsfiddle.net/A8XE2/
I have a two column layout, using a container and a div called "left" and a div called "Right". How do I make sure that the div#right is only 500px, but div#left is as big as the user's browser will allow ...?
Here's what I have now:
<div id="container">
<div id="left" style="float:left"> </div>
<div id="right" style="float: right; width: 500px"> </div>
</div>
Don't float the left div to the left. If you leave it "unfloated", then it will be the main content and automatically fill the available space.
You can do it by unfloating the #left div and giving it a padding-left that equals the #right div's width (this makes room for the right div). Finally, you'd need to swap the source order of both div's.
<div id="container">
<div id="right" style="float: right; width: 100px; "> </div>
<div id="left" style="padding-right: 100px; "> </div>
</div>
You can see it in action here.
Change style of you left div to:
<div id="left" style="margin-right:500px"></div>
This will make sure that content won't flow under the right floating div when content in the left one takes more vertical space than content in the right one.
Important
Don't forget to put the floated div in front of the unfloated one. So put your right one first in the markup and then the left one.
Solution to your particular problem
So you have two div elements
<div id="endants-content">
<div id="screenshot-preview">...</div>
<div id="endants-main-content">...</div>
</div>
And CSS should be like this to make it work as expected:
div#endants-content
{
/* put min-width here is you need it */
}
div#screenshot-preview
{
float:right;
width:30%;
}
div#endants-main-content
{
margin-right:30%;
overflow:auto;
}