I would like to position 5 column blocks,each containing text in a row.I have tried to create a wrapper class which has a width of 1600px,a padding of 30px to the left and the right and two classes that will align content to the left and the right respectively,each of these classes are in nested divs within the wrapper class.I gave each div a width of 300px and a height of 300px,the first four divs align next to each other while the last one goes below and to the right.The CSS and HTML is here.
EDIT:
The major issue got fixed when:
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
But this seems to exceed the screen resolution needing me to scroll horizontally to view all the content,how do I deal with different screen resolutions?
try to give width:1600px;
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
http://jsfiddle.net/sKsZN/
Try using float:left and display:inline-block for all the column <div>. Also make sure that the total width of those column don't exceed to .wrapper's width.
You should use float:left for your .content-right class. http://jsfiddle.net/sDyC5/2/
Wrapper element css width property has set to wrong value. You must set the properly unit (px|%|em|ex). And also display: inline-block and float propeties should not use together.
Related
How can I remove all margins from boostrap container-fluid class and its rows?
.container-fluid { padding: 0;}
This does basically what I want, but it adds 20px overflow to body. So should I just do this:
body, html { overflow-x: hidden; }
Do something with .container-fluid > .row
To be specific about your question:
The .row has a negative left and right margin equal to the left/right padding value of the col-*-*, that is why there are horizontal scrollbars when you fiddle with the grid without understanding how it works. If you manipulate the column classes with zero padding on the left and right or with some other value, the negative margin on the .row must be equal to the the padding on the left and right of the column classes. The .container also has padding that matches the value of the column classes to prevent the scrollbars.
So the answer is: .container-fluid > .row -- make the margin:0 on the left and right if you remove the padding on the left and right of the column classes. If all is zero, then you can just adjust the .container or .container fluid with zero padding on the left and right, but if you use different values > 15px L & R, then it's a different story as the .container/.container-fluid will need to be adjusted if the left and right padding on the columns is greater than 15px.
There are no margins on the col-*-* it's padding which is quite different when you use box-sizing:border-box globally as Boostrap 3 does.
If you want a tight grid, remove all padding on the left and right of all column classes and then remove the negative margin on the left and right of the .row, and then you can remove the left and right padding on the .container.
DEMO: http://jsbin.com/jeqase/2/
Removes all padding and negative margin for a tight grid and full width of the .container with any surrounding element (body, html, whatever) with the class .alt-grid:
.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}
/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}
You can also do this with .container-fluid - the only thing to zero out is the left and right padding.
If you want to remove margin, overriding the Bootstrap class or div (container-fluid, html, body) is not the best thing to do. I think it's better to create a separate class and add it in elements.
If you want to remove all margins :
.remove-all-margin{
margin:0 !important;
}
If you want to remove all margins and paddings :
.remove-all-margin-padding{
margin:0 !important;
padding:0 !important;
}
it is always a better way to add a custom class to the elements that you want to get rid of the margins rather than overriding all bootstrap elements.
row.no-margin {
margin:0 !important;
}
I want to horizontally center a column in a responsive grid I'm trying to make. I have the grid set up, and it works just fine. But I want to make a .class that will take a column and center it horizontally in the parent (.row). I would use this class to take a one-column-row and center the column in said row. I can center the text using the text-align property, but I want the entire column to be centered that way if I add a border/background to the column it will be centered in the row, not just the column's content.
Here is the codepen.
Given that you are setting a width on the column, simply use margin:0 auto to center it. You would need to overwrite float:left with float:none though..
UPDATED EXAMPLE HERE
.center {
text-align: center;
margin:0 auto;
float:none;
}
Alternatively, if the element doesn't have a fixed width set on it, you could simply make it an inline-block element and add text-align:center to the parent. Perfect for dynamically varying widths.
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
Is there a way to do this with CSS?
Thank you
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
I give all my green child divs a complete margin:
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
You can do the following:
Assuming your container div has a class "yellow".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Note2: The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
Add margin to your div style
margin:0 10px 10px 0;
http://www.w3schools.com/css/css_margin.asp
I'm late to the party but... I've had a similar situation come up and I discovered padding-right (and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area inside the inner div so there's no need to add a negative margin on the parent as you did with a margin.
padding-right: 10px;
This did the trick for me!
Is it not just a case of applying an appropriate class to each div?
For example:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
A litte late answer.
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.
Newbie question here. I have a #wrapper as my main container. Like so:
#wrapper {
margin: 0 auto;
padding: 0 20px;
width: 960px;
height: 100px;
}
My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside the #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?
The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.
If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.
Heres a JSFiddle (Sorry, just discovered this today!)
http://jsfiddle.net/wGYfR/8/
The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px
The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.
You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.
I suggest firebug This will help you so much. Seriously.
The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.
CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png
If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.
The width should be 960px, however only FireFox adds the padding to the width.
To fix this, put the following code on top (or at least above all div selectors) of your code:
DIV { /*let Firefox stick to the web standard concerning padding*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}