I have noticed, that many websites (SO included) don't shrink to the whole width of the screen, preferring to render content column either of fixed-width or setting max-width property for it. Merriam-Webster dictionary website is a good example for the latter.
Is it possible to create such a layout using Bootstap? I have managed to limit content column width inside it's col-8-md div, but there is a huge gap between content and right sidebar on big displays now.
Live demo: https://codepen.io/anon/pen/dNprzm
HTML:
<div class="row">
<div class="col-md-8">
<div class="content-block">
CONTENT
</div>
</div>
<div class="col-md-4 right-bar">
RIGHT_BAR
</div>
</div>
CSS:
.content-block {
height: 1000px;
max-width: 1000px;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
}
.right-bar {
background-color: pink;
width: 400px;
}
If I'm understanding your question correctly, you just want to be sure to have a fixed width for your content but get rid of the space that's happening to the right of it on large screens?
Remove your margin-right: auto;. Once you get to a screen size where it's larger than 1000px, it's trying to "center" your .content-block
Related
I have a flex container <main> between a <header> and a <footer>, and in that container I have a number of columns. I have set up horizontal scrolling of <main> to hanle the case of too many columns to display at once, and I've also enabled vertical scrolling on a sub-division of the columns. The intent is that the header is anchored at the top of the window, the footer at the bottom of the window, and the space between is used to display the columns, with scrolling as needed.
<header>HEADER</header>
<main class="columns">
<div class="column">
<h3>column 1</h3>
<div class="content">
long content that would scroll
</div>
</div>
<div class="column"><h3>col2</h3><div class="content">...</div></div>
<div class="column"><h3>col3</h3><div class="content">...</div></div>
<div class="column"><h3>col4</h3><div class="content">...</div></div>
<div class="column"><h3>col5</h3><div class="content">...</div></div>
</main>
<footer>FOOTER</footer>
/* trimmed css */
header,
footer { }
main {
display: flex;
column-gap: 3px;
width: 100%;
height: 600px;
overflow-x: auto;
}
.column {
width: 200px;
min-width: 200px;
}
.column .content {
height: 570px;
overflow-y: scroll;
}
I've got most of all that working here https://codepen.io/ericscheid/pen/mdMwyEE
The demo currently hard-codes a height: 600px; for the columns. (Also the div.column div.content is set to height: 570px;, which is an unsatisfactory magic number hack to get scrolling working right, and which breaks if any of the div.column h3 elements spills onto two lines.)
However, I can't figure out how to get the columns container element to fill the available height of the browser window. I've tried setting various heights to 100%, setting using display:inline-block ... but at this point I'm only poking guesses into a black box.
How can I get the columns to fill the available height? And have the scolling work correctly (e.g. if any have an extra large <h3>). (I'd rather not involve javascript to dynamically calculate heights, etc, if at all reasonably possible).
I've really hit the wall on this one and need some help. I'm trying to create a two column layout with both widths and heights adjusted to the contents of the left column. It seems to be a rather basic layout, but I'm starting to think it can't be done (without resorting to JS).
This fiddle describes what I'm trying to do. It's a container DIV with two DIVs inside, aligned horizontally. The left inner DIV should adjust its size (both width and height) to its content. The right inner DIV (which contains a Google Map) should have the same height as the left one while filling up the remaining width of the container.
<div id="container">
<div id="left">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div id="right">
Google Map here.
</div>
</div>
I've tried everything I know and all tricks I've found, but no success!
#container {
background-color: #EEE;
overflow: hidden;
}
#container div {
border: 1px solid black;
padding: 5px;
}
#left {
background-color: lightblue;
display: inline-block;
float: left;
}
#right {
background-color: lightgreen;
height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
overflow: hidden;
}
I've found many similar questions, but in all those cases the left DIV/column had a fixed width, which makes it a whole lot easier.
Any input is much appreciated, especially if it works in IE9+ (and modern browsers)!
Edit
Some clarification. The purpose of the right column is to hold a Google map and consequently the map is supposed to fill up the entire DIV. Try setting a fixed height (e.g. 100px) for #right in the fiddle that I link to above and you will see the map showing up.
jsfiddle demo
css :
.container {
overflow: hidden;
background-color: #EEE;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
p {
padding: 10px;
margin-top: 10px;
width: 50%;
}
html
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="container">
<div class="column">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div class="column">
<div id="map"></div>
</div>
</div>
<p>
The right DIV (which contains a Google Map)
should be the same height as the left DIV,
while filling up the remaining width.
</p>
<p>How to do that?</p>
Here what I came up with -> link
When you remove the overflow property of your #right div it stretches as expected. However in this case you won't be able to hide the overflowed content.
CSS
#right {
background-color: lightgreen;
height: 100%; /* THIS WON'T WORK */ // height works as expected
}
I have been through a number of similar questions, and tried to adapt the solutions to my case, but haven't had success in doing so.
I am trying to implement something of a reader, so I have a reading pane which I want to center on my page. I want to limit the size of the pane so that the user is no reading lines spanning the full width of a large browser window, but I also want to have that pane centered in the window. Above the pane I have a header which spans the full width of the page.
Originally I tried to use "span8 offset2" for the reading pane, but as the size of the window is reduced, I want the margins to disappear before the pane shrinks, and using this setup, the reading pane shrinks unnecessarily, squeezing content, as the window is made thinner.
I get the correct behavior just using "span12" with "max-width: 700px" set, in terms of the reading pane shrinking as I want it to, but I cannot get the div to center on the page.
Here is what I have that I'm working with:
<body>
<div class="container">
<div class="row-fluid">
<div class="span12 reading-pane">
<div class="row-fluid">
<div class="nav">
<div class="span6 offset3">
Main Navigation
</div>
<div class="span2 offset1">
Nav2
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="body-text">
Text Area
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The style for the reading-pane is as follows:
.reading-pane {
border: solid;
border-color: #ccc;
border-width: 3px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
min-height: 40px;
line-height: 40px;
max-width: 700px;
}
I have tried adding the following to the .reading-pane style (individually):
float: none;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
float: none;
margin: 0 auto;
I've also tried centering text in the container which centers my header text, but not the reading-pane.
So how do I get the span12 div to center on the page?
I'm assuming since you're using row-fluid that you're using bootstrap 2.0. Bootstrap 3.0 handles responsive grids a bit more cleanly, so if you can I'd recommend using 3.0.
Then move your max-width to the container:
.container {
max-width: 700px;
}
Note that 700 includes the gutters so you may want to use 730.
Or better than using max-width, you can customize (http://getbootstrap.com/customize/) your twitter bootstrap download and define your own widths there if 700 is critical to you. And you can then also remove the larger #media queries then.
There's a few other tweaks to how grids are done on 3.0, which I included in this fiddle: http://jsfiddle.net/PQM34/2/
Hard to gauge without an example of your code and Bootstrap's source...
Note, it sounds like your using the framework incorrectly though. Why not just use span10, span8, etc. and center that?
In order to center divs, using margin:0 auto a fixed width is required (%, px, em, etc.).
Try adding this css to .reading-pane:
position:relative;
margin: 0 auto;
width: 700px;
float:none!important;
I am trying to make content div show a horzontial scroll bar once the page becomes too narrow for the content inside of the content div. Currently, my setup is as follows:
HTML:
<div id="LeftNavigation">
<div id="TopNav">Menu1</div>
<div id="BottomNav">Menu2</div>
</div>
<div id="ContentContainer">
<div style="float: left; width: 500px">Content1</div>
<div style="float: left;">Content2</div>
<div>
CSS:
#LeftNavigation {
float: left;
}
#TopNav,
#BottomNav {
width: 165px;
}
#ContentContainer {
margin-left: 180px;
min-height: 150px;
padding: 10px;
}
I'd like to have my page work like the image below. Where my content container has a minimum width of say...600 pixels and then when the page width gets below the combined width of the menu and content(including margins), a scroll bar shows up. I can't figure out how to get this to work properly, though. My ContentContainer div keeps wrapping below my LeftNavigation div whenever the page becomes too narrow. Thanks in advance.
You need to add a size to ContentContainer and add overflow-x:auto. The scroll bar will show up on ContentContainer, not the entire page as you illustrate.
If you want it where shown in the diagram you'll need to make a fake scrollbar and use JavaScript to make it work.
I have the following HTML and CSS:
<div class="content">
<div class="leftbg"></div>
<div class="innercontent"><p>Some content goes here</p></div>
<div class="rightbg"></div>
</div>
.content {
overflow: hidden;
}
.leftbg {
background: url("./leftbg.png") repeat-y scroll top left transparent;
margin-left: 0;
float: left;
width: 10px;
}
.innercontent {
width: 600px;
float: left;
margin-left: 0;
}
.rightbg { /* similar to left bg except for the right side */ }
The problem that I am having is the leftbg image is only repeating until it reaches the height of the paragraph in the innercontent div. I am accessing a database to grab the content for the innercontent div and hence the content will be of variable height. Is there any way to make it so that it repeats until it reaches the bottom of the leftbg (and rightbg) div? What I mean by that is for it to repeat until it is at the bottom of the innercontent div without setting the height as static (e.g. height: 200px;) because the height will be variable.
This equal height column layout tutorial from smashing magazine might help you. With lot of explanation of all the whys.
I think the problem you are facing is that leftbg and rightbg don't have any content. The height of the <div class="content"> element equals the height of it's "tallest" child (innercontent in this case).
Maybe if you post a mockup of what you want as a final result I can help you further. Also, the markup would be helpful.