Hello i wondered how i would be able to center divs together horizontal, so far i've used margin: 0 auto; to put them in the middle, but the divs go right under each other instead of next to each other. Any ideas on how to fix that?
Here's a codepen: http://codepen.io/anon/pen/KdMmPo
HTML:
<section id="rating-box">
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
</section>
CSS:
#rating-box {
width: 100%;
margin: 20px 0 20px 0;
}
#rating-box .rating {
width: 35px;
height: 35px;
background-color: #7a7a7a;
margin: 0 auto;
}
As you see they are on top of each other, i would like to know how to make them stand next to each other.
You can use display: inline-block to child elements and text-align: center to parent:
#rating-box {
width: 100%;
margin: 20px 0 20px 0;
text-align: center;
}
#rating-box .rating {
width: 35px;
height: 35px;
background-color: #7a7a7a;
display: inline-block;
}
<section id="rating-box">
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
<div class="rating"></div>
</section>
You can just float them.
#rating-box .rating {
float: left;
}
#rating-box .rating {
width: 35px;
height: 35px;
background-color: #7a7a7a;
margin: 0 auto;
display: inline-block;
}
Related
Maybe someone more experienced knows what to do here, as I'm not sure whether this is even possible with CSS or any other way. Currently I have a parent (100% width) and a couple of child elements. All these children need to stay in one row, so when the parent overflows it simply becomes horizontally scrollable. As for now, the child elements keep shifting into multiple rows when the parents width becomes too small. The snippet contains the exact CSS as it is right now, but I have also tried display: inline-block; instead of float: left;.
.container {
padding: 16px 24px;
width: 100%;
}
.parent {
padding: 24px 24px 16px 24px;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
}
.child {
box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
background-color: grey;
margin-bottom: 16px;
border-radius: 4px;
margin-right: 24px;
height: 255px;
width: 175px;
float: left;
padding: 0;
}
<div class="container">
<div class-"parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</div>
This should work in CSS:
.parent {
white-space: nowrap;
overflow: auto;
}
.child {
display: inline-block;
}
Don't forget to remove float: left and overflow x/y.
.container {
padding: 16px 24px;
width: 100%;
white-space: nowrap;
}
.parent {
padding: 24px 24px 16px 24px;
width: 100%;
}
.child {
box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
background-color: grey;
margin-bottom: 16px;
border-radius: 4px;
margin-right: 24px;
height: 255px;
width: 175px;
padding: 0;
display: inline-block;
}
<div class="container">
<div class-"parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</div>
I have a dropdown that needs a scrollbar with left and right margins. I'm using -webkit-scrollbar, but as far as I can tell, it only supports margins along the scroll axis, so I've been approximating horizontal margins with a right margin on the items inside the container, and some right padding on the outer div, as you can see in my code.
However, this creates unsightly extra-wide right padding when the container doesn't have enough items to be scrollable (see the second dropdown in my example). I want the right edge to look the same as all the other edges when there's no scrollbar.
.dropdown {
width: 360px;
padding-right: 10px; /* pseudo-right-margin for scrollbar */
background-color: green;
padding-bottom: 10px;
max-height: 365px;
margin-bottom: 20px;
}
.itemContainer {
max-height: 355px;
overflow-y: auto;
padding-left: 10px;
padding-top: 10px;
}
.item {
background-color: white;
height: 51px;
padding: 10px;
margin-bottom: 10px;
margin-right: 10px; /* pseudo-left-margin for scrollbar */
}
.item:last-of-type {
margin-bottom: 0px;
}
#media screen {
.itemContainer::-webkit-scrollbar {
width: 6px;
border-radius: 2px;
}
.itemContainer::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: black;
border: solid red 10px;
}
.itemContainer::-webkit-scrollbar-track {
margin-top: 10px;
background-color: yellow;
width: 6px;
}
}
<div class="dropdown">
<div class="itemContainer">
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
</div>
</div>
<div class="dropdown">
<div class="itemContainer">
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
<div class="item">thing</div>
</div>
</div>
My only idea for a css-only solution is somehow using an .item:nth-child(5) pseudo-selector, since the dropdown becomes scrollable with 5 or more items, but I don't know what property I would give it.
I already have a javascript solution but I want to do this with just css, if that's possible. (Also, always showing the scrollbar is not an acceptable solution.)
All right. Was not so hard, but unfortunately there is a lot of extra html in my solution. Please tell if need comments and/or explanation of something.
Result is below.
.dropdown {
width: 360px;
background-color: green;
padding-bottom: 10px;
max-height: 365px;
margin-bottom: 20px;
}
.itemContainer {
max-height: 355px;
overflow-y: auto;
padding-left: 10px;
padding-top: 10px;
margin-right: 10px;
}
.itemContainer>div {
display: table;
width: 100%;
}
.item {
display: table-row;
}
.item>div{
display: table-cell;
vertical-align: top;
padding-bottom: 10px;
}
.item:last-child>div {
padding-bottom: 0;
}
.item > div:nth-child(1) {
width: 100%;
}
.item>div:nth-child(1)>div{
background-color: white;
padding: 10px;
height: 51px;
}
.item:nth-child(5) > div:nth-child(2) > div {
width: 10px;
}
#media screen {
.itemContainer::-webkit-scrollbar {
width: 6px;
border-radius: 2px;
}
.itemContainer::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: black;
border: solid red 10px;
}
.itemContainer::-webkit-scrollbar-track {
margin-top: 10px;
background-color: yellow;
width: 6px;
}
}
<div class="dropdown">
<div class="itemContainer"><div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
</div></div>
</div>
<div class="dropdown">
<div class="itemContainer"><div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
<div class="item"><div><div>thing</div></div><div><div></div></div></div>
</div></div>
</div>
In a few words, I added table layout. When there are more than 4 rows, the second column's width is set to 10px.
I am making my first webpage and I have the elements I want- I can't seem to get them to center on the page. I have tried margin: auto, text-align: center, and lots of toher things. Nothing has worked.
I want the header, an image , and a button at the end of my page, to be a central spine down my page. Any suggestions would be appreciated.
Thanks
Here is my code:
HTML:
<div class="container">
<h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"></div>
<img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday">
</div>
</div>
CSS
body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff; }
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
align: center;
padding-left: 40px;
padding-right: 40px;
float: center;
max width: 100%;
text-align: center;
marrgin: 0 auto;
float: center;}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}
.img-responsive {
margin: 0 auto;}
.img-resize {
max-width: 400px;
max-height: auto;}
you need to add the container text-align
<div class="container" style="text-align: center;">
the div that wraps your element is the responsible to align the element.
Define a class and call it for example .text-center and put inside it text-align: center,
once you want to center a text just give this class to the container element (parent element).
Hope this solve your issue.
body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff; }
.text-center {
text-align: center;
}
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
padding-left: 40px;
padding-right: 40px;
max width: 100%;}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}
.img-resize {
max-width: 400px;
max-height: auto;}
<div class="container text-center">
<h1> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container text-center">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"></div>
<img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday">
</div>
</div>
There are some mistake in your code, for example, you must use of max-width: 100%; no max width: 100%; or text-align: center; no align: center; value for float is left or right so float:center is wrong, and other mistakes.
see my code:
body {
margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff;
}
h1 {
background-color: yellow;
font-size: 300%;
border: 1px solid;
border-radius: 25px;
text-align: center;
padding-left: 40px;
padding-right: 40px;
max-width: 100%;
text-align: center;
margin: 0 auto;
}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;
}
.row {
text-align: center;
}
.row img {
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>
<div class="container">
<div class="row">
<a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" alt="Ami laughing at her 26th Birthday">
</a>
</div>
</div>
I tried css stylesheet reset which didn't do anything, and other solutions but to no fix. Margins are set to 0 on container and there is still a margin on the right hand side. If i disable the margin left 0 the extra whitespace appears on the left side. Thanks in advance.
body {
padding-top: 50px;
}
.container {
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Set the margin for all elements to 0px, this will remove the extra margin
* {
margin: 0px;
}
Also add width: 100% to your .container
Note: Add this as the first style in your CSS. This can be overridden by the styles specified below.
Below is an update to your code.
* {
margin: 0px;
}
body {
padding-top: 50px;
}
.container {
width: 100%;
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Setting the width of the #content div to 100% will fix your problem. It's not a margin issue. For the width % to work on the inner divs, it needs a container width to base off of.
#content{
overflow: auto;
background-color:#FFFFFF;
margin-left: 0;
margin-right: 0;
width: 100%;
}
I'm facing with a strange problem I can't pinpoint. I have a 3 column layout where the first 2 columns have position-fixed, so that only the third column scrolls.
The first element of each column have a margin-top of 20px (for the first and third column it's the H1 element, for the second column it's the div). For some reason, the third column does not line up with the first 2.
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
I have a simple version of it at jsfiddle, demonstrating the problem.
http://jsfiddle.net/59ez7zmy/
I can only assume that the position-fixed has got something to do with it, but I can't seem to figure it out.
When I use the Chrome developer toolbar, there is a (approx) 20px gap (although not defined by any margin) between the top of the page and the divs, and the elements inside the position: fixed columns have a 20px margin relative to the container2 div (as expected). The third column however, has a 20px margin to the top of the screen rather than the .container2 div.
Anyone knows what I'm missing here?
Specify top: 0 for .sidebar and .menu (fiddle).
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
top: 0;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
top: 0;
}
See the documentation for top
One solution is to add position: fixed on .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
margin-left: 370px;
width: 150px;
position: fixed;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">
Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also if you don't want to use position: fixed you can use display: inline-block also in .content class:
h1 {
font-size: 1em;
margin-top: 20px;
}
.sidebar {
position: fixed;
width: 100px;
height: 100%;
color: rgb(97, 68, 50);
text-align: right;
}
.menu {
position: fixed;
width: 250px;
margin-left: 110px;
height: 100%;
color: rgb(97, 68, 50);
}
.content {
width: 150px;
position: relative;
display: inline-block;
}
.mediablock {
margin-top: 20px;
}
.wrapper {
position: relative;
text-align: center;
}
.container2 {
width: 550;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="wrapper">
<div class="container2">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="menu">
<div class="mediablock">Media here</div>
</div>
<div class="content">
<h1>Content goes here</h1>
</div>
</div>
</div>
</body>
Also you have some errors in your css i fix them.