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>
Related
Here is my HTML that I am trying to style:
<div id="cards-text-wrap">
<h1 class="text">Some text here</h1>
<div class="card-wrapper">
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
</div>
</div>
I want to make the "scrollable card" divs actually scrollable (sideways). Right now they are only being resized to fit on the same line, which means it isn't overflowing on the Y-axis, which is good. But it isn't overflowing on the x-axis, which is what I want.
I tried to use a bunch of different methods, all of which resulted in the same wrong result. In this example I used overflow-x to try to make it overflow out of the viewport, but it is still not doing that.
And the css looks like this:
#cards-text-wrap {
background: #D9D9D9;
width: auto;
height: 300px;
margin: 230px 0 0 0;
text-align: center;
}
.text {
background: #D9D9D9;
margin: 10px 0 0 0;
text-align: center;
font-size: 2rem;
}
.scrollable-card {
width: 180px;
height: 210px;
background: white;
border-radius: 26px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: inline-block;
margin: 0 20px;
resize: none;
}
.card-wrapper {
display: flex;
flex-wrap: nowrap;
height: 210px;
overflow-x: scroll;
width: auto;
margin-top: 10px;
}
The result I am getting from this is the outermost div looks fine and the text looks fine, but the elements are squished to roughly 40 pixels, instead of their set width of 180px. It is also not overflowing at all on the x-axis.
What am I doing wrong here?
Try this:
#cards-text-wrap {
background: #D9D9D9;
width: auto;
height: 300px;
margin: 230px 0 0 0;
text-align: center;
}
.text {
background: #D9D9D9;
margin: 10px 0 0 0;
text-align: center;
font-size: 2rem;
}
.scrollable-card {
min-width: 180px;
height: 210px;
background: white;
border-radius: 26px;
white-space: nowrap;
margin: 0 20px;
width: 100%;
}
.card-wrapper {
display: flex;
flex-wrap: nowrap;
height: 210px;
overflow-x: scroll;
width: auto;
margin-top: 10px;
}
<body>
<div id="cards-text-wrap">
<h1 class="text">Some text here</h1>
<div class="card-wrapper">
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
<div class="scrollable-card"></div>
</div>
</div>
</body>
i'm using position: fixed and width 90% for a footer inside a overlay. The overlay and the footer are both 90% wider but the footer is wider. I guess it's because the footer ignores the scrollbar in chrome. Is there a way to solve this problem without JavaScript?
Here is quick example: https://jsfiddle.net/a15kpuL9/3/
The HTML:
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFooter">
</div>
</div>
</div>
</div>
</div>
The CSS:
.stickyFooter {
width: 90%;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: #F5F5F5;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90%;
}
The Problem:
change the 90% to 90 vw instead. Here you go. :)
.stickyFooter {
width: 90vw;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: red;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90vw;
}
.container {
text-align: center;
vertical-align: middle;
overflow-y: scroll;
height: 100%;
display: block;
width: 100%;
position: absolute;
right: 0;
left: 0;
margin: 0 !important;
max-width: 100%;
padding: 0;
}
.career-detail-inner-wrap {
background: green;
height: 800px
}
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap">
Inner
<div class="stickyFooter">
Sticky
</div>
</div>
</div>
</div>
</div>
I see one less closing div , could that be the problem
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
</div>
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
or
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
</div>
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>
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;
}
Just have a small css problem...
I have a couple of divs within a div that's all contained within a wrappe,
ie
<div wrapper>
<div bodyWrapper>
<div bodyLeft></div>
<div bodyRight></div>
</div>
</div>
That's not all the code, there is extra between all of them but the problem is with the css. I have the main background of the wrapper set to black and all the rest set to white. The body(left & Right) tags both come up white but the bodywrapper tag sees to have no effect so there is black space under the body tags if they dont have the same length. is there anything i can do to sort it?
here is the css code
#wrapper #bodywrapper {
border: 20px solid #000;
background-color: #FFF;
margin: 0px;
padding: 0px;
height: auto;
width:auto;
}
#wrapper #bodywrapper #bodyleft {
margin: 0px;
height: auto !important;
width: 630px;
float: left;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
overflow: hidden;
}
#wrapper #bodywrapper #bodyright {
margin: 0px;
float: right;
height: auto;
width: 280px;
background-color: #FFF;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
color: #FFF;
background-image: none;
}
Faux columns would work but if you're after a pure CSS method you can try equal height columns from www.ejeliot.com
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
This may help, Faux columns: http://www.alistapart.com/articles/fauxcolumns/