I'm trying to create a responsive layout, with a left-hand sidebar that collapses on narrower screens. Something a bit like http://purecss.io/ but with a fixed top header as well.
My work so far (the code is really too long to reproduce here): http://jsbin.com/uhalic/3/edit
There are two problems that I'm struggling to fix (NB you'll need to make the HTML section wider than 450px to reproduce these):
(1) The last elements of the list are being shifted sideways, for no reason I can understand.
(2) The footer should be visually contained entirely within the #main (red section), and indeed that's where it is semantically, but the text is falling partly into the #sidebar (blue section).
What am I doing wrong?
It's because the red column has no <li> elements to the left of it, so there are actually 4 <li> elements in the red section which are being skewed, two are to the left of each visible one but being hidden.
You need to add a margin-left: 160px to the .results class. Then remove the width: 100% off of the .result or if you're going to keep it, have it as 100%.
Also, add margin-left: 200px to #footer
Related
I'm confused about this part of code in the source code of bootstrap 3.3.5
/*line 1585 - 1590*/
.container {
padding-right: 15px;
padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
margin-right: -15px;
margin-left: -15px;
}
what are they used for?
-------------------------------
Thanks guys!
This is my opinion after reading your answers：
1.Add padding to the .container makes the content of .container away from the boudary;
2.But this means now the first/last col is 2 paddings away from the boundary,not so nice. So add .row negative margin to streach out it to the boundary.
Am I right?
btw,I asked this question because I dnt see the difference whether I delete these two rules or not.
Generally, containers as it states, adds padding on left and right so that content doesn't go right to the edge of the screen, making it useable for mobiles and easier to read.
When using columns, these add padding left and right, which can appear 'out of alignment' against the rest of the content, so you can wrap those in a row, using negative margins to bring that padding back in line with the rest of the content.
Again, this is to make it appear more aligned and clean.
From the Bootstrap Documentation (http://getbootstrap.com/css/#grid) :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use
rows to create horizontal groups of columns.
Content should be placed
within columns, and only columns may be immediate children of rows.
Rows should always be placed inside of a container to ensure proper spacing (between page content and the edge of the browser). If you don’t put a row inside a container, the row will be wider than the width of the viewport, causing a horizontal scrollbar.
The Bootstrap row uses negative margins to counteract the padding of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container. This is important for responsive designs to ensure even spacing since the columns may wrap or stack vertically (changing the number of columns displayed in each row).
The same is also true in Bootstrap 4.
Also see:
Bootstrap Rows and Columns - Do I need to use row?
How the Bootstrap grid works
Bootstrap columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.
I have a layout with two divs on the same line. I need one div floated left and the other floated right so that the divs will stay on their respective sides no matter the browser size and the div on the right won't fall below the left floated div when the browser size is smaller than the two divs.
I need the browser to cut off the 2nd div after the 2 divs touch each other when the browser shrinks.
I had a picture to illustrate my question but I don't have enough reputation points to post it.
Do you really need to float the divs? If not you can always create a wrapper for the divs with a minimum width set to allow the divs and a position of relative or absolute to stay next to each other,
#wrapper {
min-width: 250px;
position: relative
}
then set the inner divs display property to "inline-block".
.blocks {
display: inline-block;
position: absolute;
}
All together, this will create a "safety bubble" in which your divs can rest side by side without jumping to the next line, even after window resizing.
Check it out here.
EDIT
After a couple of trial and errors I believe we have an answer.
Javascript.
So in interest of time, I will post the code on jsFiddle here. Breifly, what I added to the previous code was a script that ( on window.onload) you get the id's of both inner divs. You then create two objects to hold the position of their facing borders which are then compared to see if the second div ( one on the right ) has crossed into the first. The numbers in the div are there as a place marker to show that the div does not slide onto/under the other.
*PS the 200px is just a demo number, they can be changed)
I'm assuming that what you mean by "cut off" is that you want the left div to appear "in front of" the right div. To do this, you want to give the left div the css
{
position:absolute;
left:0px;
z-index:2;
display:inline-block;
width:[number]px;
height:[number]px;
}
and the right div
{
position:absolute;
right:0px;
z-index:1;
display:inline-block;
width:[number]px;
height:[number]px;
}
and to their shared parent div add the css "position:relative;".
Alternately, giving both divs "position:fixed;" might work, that makes them relative to the browser winder instead of the parent div, though that will give you very different outcomes when people try to scroll. You'll also need to give the left div a background that isn't transparent, or they'll just overlap. Also note that "position:absolute;" puts the divs 'outside the flow' as it were, in the sense that they will also overlap anything else you put in, and your design has to account for this.
Working example http://jsfiddle.net/RdX5P/
If by "the browser needs to cut off the second div" you mean you want the second div to just disappear when the window gets too small, just float the two divs and put them in a container div with set height and with "overflow:hidden;"
I have a div which is floated to the left. To the right of that, I have a <ul class='nav nav-tabs'>.
If I float the nav list to the left, it looks fine except that the bottom border of the list only extends beneath the nav options. How do I get it to extend across the remaining portion of the screen? (i.e. all the way to the right).
If I don't float the list to the left, the tabs stay in the right place but the bottom border fits to 100% of the view port and moves to below the left nav.
Here's the JS fiddle: http://jsfiddle.net/kimprince/TCEPE/
Thanks!
Instead of floating the right column to the left, add overflow:hidden (or auto) to trigger a new block formatting context.
This effectively causes the right column to take up the remaining horizontal space.
You can find a thorough explanation about how this works here
#right-col
{
overflow:hidden;
}
FIDDLE
Hi didn't quite understand use col- class like col-lg-4 don't add your own floats if you can avoid it use class pul-left for floating it left or pull right for floating it right
also to get the head links of bootstrap to work in online editors like mine click the icon next to the word HTML.
http://codepen.io/CarraraWebsiteSolutions/pen/JFebh
I'm clearly losing the plot... I just can't seem to figure this one out!
Ok so this jsFiddle has 2 divs - one inside the other.
I want the blue one to always be 100% wide, regardless of how wide the window has been reduced.
If you load it up and then reduce the width of the result view to smaller than the red block you will see that a scroll bar at the bottom appears - scroll this to the right and the blue block is now not at 100% of the window - well, it is at 100% of the new size, but i need it to be blue all the way across.
This same effect will be used in a footer too. Essentially header/content/footer will have a max of 1080px and the background divs for the header and footer will have an image which is to stretch the whole way across. - there will eventually be a layout-footer and footer div using the same methods.
Any idea how I can achieve this? I'm having a huge brain-fart...
This may help:
#layout-header { min-width: 600px; }
Try using css attribute overflow for your header. I'm not exactly sure if this is what were you were looking for, but this will make the blue box contain a scrollbar inside it if the red box is bigger.
#layout-header
{
width:100%;
height:126px;
background-color:blue;
overflow:auto;
}
I have a script which generates a DIV for each message written on a donation wall on my site. You can see the donation wall here.
This is the section of the script that generates the DIVs:
foreach( $donors as $donor ):
$output = '<div class="donorbox"><p><strong>'.$donor->name.'</strong> donated '.$donation.'<small class="date time">on '.$datetime.'</small><blockquote class="comment">'.nl2br($donor->comment).'</blockquote></p></div>';
endforeach;
I have set the width of each donorbox DIV to 43.5%, and added float:left, so that 2 always fit on each line.
Because the DIVs are going to have different heights, depending on how long the message the user writes, the display of the divs is rather uneven (see page linked to above). So I would like to find a way of centering the DIVs vertically so that there are always two per line, but so that they display more evenly, i.e. so that the vertical center point of the 2 DIVs is aligned.
Another problem with the current implementation is that when the height of a DIV on the left is greater than the height of the div on the right, the next div stays on the right side of the page, rather than being forced to the left side, and this is not what I want. You can see this now if you look at the page and reduce the width of your browser window. The third donorbox DIV stays on the right.
To hopefully make what I am on about clearer I include two images below:
CURRENT
REQUIRED
If you are unsure about the height of the element always use display: inline-block instead of float. If you change it now - they will always be positioned correctly. In order for them to be vertically centered - simply add vertical-align: middle to them as well :)
P.s. If you need IE7 support for display: inline-block; add *display: inline; *zoom:1; ;)
You can let the second one float right by using something like:
.yourclass:nth-of-type(2n) {float:right !important;}