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;
Related
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
I'm creating an image gallery for a website. The images appear as a grid : there are 3 images on every line when I open the page on my computer, but I may get more or less depending on the width of the window. This doesn't look bad at all, but I would like to improve it, so that it shows only two images, or just one per row, depending on the screen size. I could use media queries, but I only have bad memories about them and I would like to avoid using them if possible. Here is what my HTML looks like :
<div id="image_container">
<div style="background: url("image 1 url") center center no-repeat"></div>
<div style="background: url("image 2 url") center center no-repeat"></div>
(....)
<div style="background: url("image x url") center center no-repeat"></div>
<span style="display:block; clear: both;"></span>
</div>
and the CSS :
#image_container{
width: 95%;
margin: 5% auto;
border-radius: 10px;
border: 1px solid grey;
}
#image_container>div{
float: left;
width: 290px;
height: 164px;
margin: 2px;
overflow: hidden;
border-radius: 5px;
}
Thanks
The cheap way to do it is to change this in #image_container>div:
width: 100%;
max-width: 290px;
This trick will ensure that on too-small screens, the image will only take up the screen width and not the specified 290px.
Now you need to keep the aspect ratio. To do that, first calculate it: 164/290 = 56.55%. Take this value, remove the height from your styles, and add this:
#image_container>div:before {
display: block;
content: '';
padding-top: 56.55%;
}
This will give aspect ratio to your box, due to the clever trick that padding-top is a percentage of the parent element's width (and pseudo-elements are children of their main element).
With these combined, your boxes will stay the same shape but just get smaller if there isn't enough room.
That said, two points for you:
Media queries aren't all bad. Maybe you were just doing something not quite right with them. I would suggest looking into them again, as they are very powerful.
Generally the smallest width you need to worry about is 320px, the width of an iPhone. I haven't yet encountered a smaller screen than that, so your 290px boxes should be fine anyway.
If you're willing to use a framework like Bootstrap, you could use its grid system to get pretty much what you're looking for without doing the media queries yourself. You would just need markup like this:
<div id="image_container">
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
</div>
As long as the number of images displayed on each row is a factor of 12 (1, 2, 3, 4 or 6), then you'll always have complete rows.
I made this design, that contains 2 types of content boxes, one which contains pictures and one that doesn't. All the boxes that don't have a picture have the same size. And the bottom margin should also be equal like this:
But because the boxes with pictures are bigger, and I'm using "float" the bottom boxes are being placed according to the bottom margin of the biggest box at the top, which causes it to leave a lot of blank space in between.
Is there any way to float the bottom boxes under the small boxes? I have tried both with floats and "displays" but nothing seems to work.
This is my code:
<div class="contentBox">
<div class="contentBoxHead">
</div>
<div class="contentBoxPicture">
<img src=" /categoria/articulo/images/" />
</div>
<div class="contentBoxDescription">
<h2 class="contentBoxDescriptionText">
</h2>
<h3 class="contentBoxDescriptionText">
</h3>
</div>
</div>
...
.contentBox{
width: 300px;
float: left;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
I have removed all the CSS related to the inner child divs of "contentBox" for it doesn't seem to be the problem here.
Please note that this is for a CMS type of site and I am trying to make this work the same way if all the boxes have pictures or not, and even if the order is completely different. For that reason I can't hardcode the positions.
I don't believe this is achievable with CSS only solution. But this is basically so called masonry layout. You can achieve it with e.g. this JavaScript library: http://masonry.desandro.com/
put the divs with content in one div and image one in another div.
for ex.
<div class="content_description">
<div class="content_1"></div>
<div class="content_2"></div>
</div>
<div class="content_image">
<img src=""></img>
</div>
and then put css like
.content_description {
width : 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.content_image {
width: 300px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
cover all of this with another div where you define your float left.
If you don't need very fine control over the content flow then you can use CSS columns. I prepared a little demo for you where you can see there is no float, content is wrapping, height is properly preserved.
Demo: http://jsbin.com/pesoto/edit?html,css,output
Have fun and explore CSS3 features, theres a lot of good stuff there. :)
I am trying to make the logos in a header to scaffold (stack downwards) when screen size is decreased. At the moment i get the following:
<div id="header_inner">
<div class="logo"><a rel="home" href=""><img src="/logoShort1.png" alt=""></a></div><!-- .logo -->
<div id="header_extras"><div id="header_extras_inner"><div class="header_social"><div class="social_icon awake_dark"><img src="twitter.png" alt=""></div><div class="social_icon awake_dark"><img src="http://10.10.1.202//facebook.png" alt=""></div><div class="social_icon awake_dark"><img src="http:///email.png" alt=""></div></div></div><!-- #header_extras_inner -->
</div>
<div id="logoMob" class="headerStack"><img src="/logoMobPhone.png"></div>
<div id="logoLand" class="headerStack"><img src="/logoLandline.png"></div>
</div>
I simplified your CSS. It looked like you were trying to do too much.
http://jsfiddle.net/WtZad/1/
CSS
#header_inner {
min-width: 900px;
margin: 0 auto;
}
#header_inner > div {
float: left;
margin: 5px; /* add some space around them */
}
Using a set width with width: 900px; will create a horizontal scroll bar. Using max-width: 990px; allows it to flex at smaller screen sizes.
You can do this by specifying in CSS float:left; and clear:left; whilst using Adapt.js you can change load css files dependant on screen size. This way you can make the CSS rules specific for the layout.
Make sure to include the CSS files, JS and the initialisation.
EDIT /*
This is without the JS and a simple media query http://jsfiddle.net/meeb0/mSTrQ/1/
I'm making a website and want it to appear as a grid of boxes and rectangles.
I have a 6x6 grid of relatively-alined left-float divs. They work fine and fit neatly in a 900 width wrapper div. If i want a horizontal rectangle, i simply make one of these squares twice as wide (accounting for margins between, but that's irrelevant) and delete the one next to it. No problem.
The issue I have comes in when I want to make a rectangle twice as TALL. it ends up bumping everything left of it in the same row as it a line down. The same happens with a square twice as large (2x2 grid units).
Here's the code in jsfiddle:
http://jsfiddle.net/zucw9/
Essentially, how can I get either 8,9, and 10 to shift up one space, or for 6,7, and 8 to move into that gap, leaving 9 and 10 where 6 and 7 are right now?
http://jsfiddle.net/zucw9/10/
This solution isn't a very good solution but it works.
(I changed some of the names so i could read it better. (.grid_rect_tall became .grid_tall etc. margin-left:10px; margin-right: 0px etc.. became margin: 5px;)
basically you specify a -ve margin-bottom for the tall one and an extra margin so the other elements don't overlap.
.grid_square, .grid_long, .grid_tall
{
float: left;
margin: 5px;
background: #6CC;
}
#main{
position: relative;
width: 905px;
overflow: hidden;
border: 1px solid black;
padding: 5px;
}
.grid_square{
width: 140px;
height: 140px;
}
.grid_long{
width: 290px;
height: 140px;
}
.grid_tall{
width: 140px;
height: 290px;
margin-bottom: -150px;
}
.rbuffer
{
margin-right: 155px;
}
.lbuffer
{
margin-left: 155px;
}
I'd still go with my comment though and use either: http://960.gs or css3 grid layout: http://w3.org/TR/css3-grid-layout
EDIT:- I thought i better put a why to my comment earlier that this is not a good solution. Simply put: if you want to change the layout of the page you will have to change the classes on the items as well as having to change the css.
Also created one with even more elements to show the possibilities: http://jsfiddle.net/zucw9/11/ (or in em instead of px because i was bored. http://jsfiddle.net/zucw9/15/)
The layout is standard, how it should be displayed. I would recommend to use another div which wraps up the dives that appear before the taller div. This is not a very flexible solution though.
Edit: Move
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
higher in hierarchy after
<div class="grid_square">2</div>
should fix it.
i hope your thinking like below
code:
<div id="main">
<div class="grid_square">1</div>
<div class="grid_rect_long">2</div>
<div class="grid_rect_tall">3</div>
<div class="grid_square">4</div>
<div class="grid_square">5</div>
<div style="clear:both"></div>
<div>
<div class="grid_square">6</div>
<div class="grid_square">7</div>
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
</div>
</div>