I have seen this question and similar questions asked a few times on here, but how can i prevent line breaks to my floated items inside a scrolling section. I have a div that I want a horizontal scroll on.
I know this can be done by added the margin or left values to each item as shown here, this seems to be a common fix for the problem:
JSFIDDLE From this Post
This works well if you know the width of the container, how would this work with a width of auto as I intend to pull this data from a database, so the width would vary depending on the number of results.
Heres my example:
CSS:
.items{
width:100%;
overflow-x:scroll;
overflow-y:hidden;
background:rgba(255,255,255,.8);
height:350px;
position:relative;
}
.items .scroll{
height:100%;
padding:0px;
width:auto;
position:absolute;
white-space:nowrap;
}
.items .item{
height:100%;
margin-left:25px;
margin-right:25px;
width:150px;
float:left;
position:relative;
display:inline-block;
}
.items .item a{
padding:5px;
background:#0e76bc;
color:#FFF;
text-decoration:none;
}
.items .item .img:hover{
box-shadow:0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
}
.items .item .img{
height:175px;
width:100%;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
}
HTML :
<div class="items">
<div class="scroll">
<div class="item">
<p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
<p class="title">Product Name</p>
<p class="left"><strong>Current Bid:</strong> £10.00</p>
<p class="right">View Item</p>
</div>
<!-- .item repeats a few times after a DB query, hence exact width is unknown -->
</div>
</div>
This could be solved with an init() function in javascript, but I feel there should be a way to do this in css.
Try like this along with your code: DEMO
CSS:
.items .item{
height:100%;
margin-left:25px;
margin-right:25px;
width:150px;
position:relative;
display:inline-block;
}
Just take float:left; away from .items .item, and it seems to work like asked:
.items .item{
height:100%;
margin-left:25px;
margin-right:25px;
width:150px;
position:relative;
display:inline-block;
}
Related
This is a very minute detail, as it is not a problem when there ARE posts obviously; but when the theme has no posts, the page displays a white border with no padding or content. I'd like to hide that completely if there are no posts.
HTML
<div id="container">
<div id="content">
{Block:posts}
...
{/Block:posts}
</div>
</div>
CSS
#container:empty{
display:none;
}
#container{
position:absolute;
border:5px solid white;
border-radius:3px;
display:inline-block
background:#155484;
max-height:497px;
width:547px;
overflow-y:scroll;
overflow-x:hidden;
margin-left:43%;
margin-right:15%;
margin-top:3%;
margin-bottom:5%;
}
#content{
margin:5px;
margin-right:0px;
background:#7995d6;
padding:5px;
padding-left:10px;
width:auto;
color:#fff;
font-family:monospace;
text-decoration:none;
font-weight:normal;
}
I know that display:none doesn't actually work, but I'm lost on where to start. Also, I'd like to stick to CSS or HTML if possible; I don't have a clue how to use anything else.
I am having extreme difficulty organizing two divs.
I have a footer, which includes two paragraphs. I want paragraph 1 hugging the left border of the footer div, and I want paragraph 2 hugging the right border of the footer div, AND these paragraphs must be on the same line.
My problem is that my divs are behaving oddly.
I have tried floating and giving widths but nothing seems to work, the paragraphs seem to keep piling on top of eachother.
Does anybody know how to resolve this? I just want to know how to write 2 paragraphs out on the same line hugging opposite borders.
HTML:
<div id='container'>
<div id='footer'>
<div id="errors">
<p>paragraph 1</p>
</div>
<div id="other">
<p>paragraph 2</p>
</div>
</div>
</div>
CSS:
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
}
JS FIDDLE which shows how my code is behaving oddly.
I have made changes to your fiddle https://jsfiddle.net/4vuywmn2/1/
You must float the errors div to the left and the other div to right and you must clear after the container around them closes.
To understand why you need to clear I suggest you read this answer
Is this what You want :
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
display:inline-block;
float:left;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
}
<div id="container">
<div id='footer'>
<div id="errors">
<p>Paragraph 1</p>
</div>
<div id="other">
<p>Paragraph 2</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
You have to add display:inline-block; for error class, and using float : left for error, and right for other. And, on end, after other, You have to add one more div with clear:both;, how above div float will be cleared.
Try float and position attributes like this...
#container
{
width:90%;
margin:auto;
background-color:#F6F4F1;
border: 5px solid #00b4b4;
padding:0;
border-radius: 25px;
}
#footer
{
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
margin-left:4.5%;
text-align:left;
color:red;
float:left;
position:absolute;
left:0px;
}
#other
{
text-align:right;
margin-right:3%;
display:inline-block;
float:right;
position:absolute;
right:0px;
}
try this mate, is this what you want:
#footer
{
height: 100px;
width:100%;
bottom:0;
color:#838B8B;
font-family:verdana;
}
#errors
{
float: left;
margin-left:4.5%;
text-align:left;
color:red;
}
#other
{
float: right;
text-align:right;
margin-right:3%;
display:inline-block;
}
https://jsfiddle.net/4vuywmn2/5/
Can you, please, help me to remove the far right margin from my boxes?
I am trying to use the ::after pseudo element in CSS but it doesn't seem to work. (http://jsfiddle.net/ve0Laa8f/)
<div class="content-wrap">
<div class="content-center-wrap">
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"></div>
<div class="index-cats-wrap"><p>test</div>
</div>
</div>
.content-center-wrap{
width:960px;
height:auto;
min-height:400px;
overflow:hidden;
background-color:#fff;
margin: 0 auto;
padding-top:40px;
padding-bottom:40px;
}
.index-cats-wrap{
display:block;
float:left;
width:298px;
height:400px;
margin-right:20px;
border:1px solid #95a5a6;
}
.index-cats-wrap::after{
margin-right:0px;
}
Thanks.
You need :last-child css selector.
.index-cats-wrap:last-child {
margin-right: 0px;
}
Fiddle: http://jsfiddle.net/ve0Laa8f/5/
I am playing around with using Divs and CSS instead of tables and I am having some problems with my code/CSS. I am trying to set this up so I have 3 columns next to eachother in a container that is centered to the page which has the text aligned to the bottom so the text is around the same height as the bottom of the image I am using in the center column. I have been unable to achieve this and I have a new found respect for UI guys. My code and CSS are as follows. Any guidance would be helpful :)
body {
}
#Container
{
border:1px solid #dddddd;
padding:40px 94px 40px 94px;
background:#ffffff;
width:55%;
height:auto;
border-radius:0px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#Address
{
border:1px solid #dddddd;
position:relative;
text-align:left;
width: 33%;
}
#Phone
{
border:1px solid #000000;
position:relative;
text-align:right;
width: 33%;
}
#Logo
{
border:1px solid #4cff00;
position:relative;
float: left;
width: 33%;
}
HTML
<div id="Container">
<div id="Address">123 Testing Street</div>
<div id="Phone">(ccc) 223-3323</div>
<div id="Logo"><img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" /></div>
</div></blockquote>
see the fiddle here , This is not 100% everything you asked for, but it is a big start! You have the appearance of a table while only using div's. I am not going to finish every little detail for you, but this should get you going, it is almost complete.
#Container{
border:1px solid #dddddd;
padding:5px;
background:#bbb;
width:55%;
margin: 0px auto;
position:relative;
height:200px;
}
.cell{
display:inline-block;
width:32%;
height:100%;
border:1px solid #000;
position:relative;
vertical-align:bottom;
line-height:370px;}
<div id="Container">
<div id="Address" class="cell">123 Testing Street</div>
<div id="Phone" class="cell">(ccc) 223-3323</div>
<div id="Logo" class="cell">
<img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" style="height:50px;" />
</div>
</div>
I simplified your css a bit. See if this is what you're looking for.
#Container{
margin:0 auto;
width:500px;
background:gray;
}
#Address, #Phone, #Logo{
float:left;
width:33%;
height:256px;
line-height:512px;
}
http://jsfiddle.net/39M9L/1/
Part of the problem you're going to have with aligning to the image is there is white space around the logo, so to get the text to align to the edge of the logo, you're going to have to tweak the numbers a bit, rather than rely on the image height.
You can add a span within a div, and use margin-top to make it in the bottom of the div.
CSS:
#Container > div {
min-height: 52px;
float: left;
text-align: center;
}
#Container > div > span {
display: inline-block;
margin-top: 35px;
}
Take a look: [JSFIDDLE] (http://jsfiddle.net/blck/txXE2/)
I'm having a heck of a time with this and after trying to implement what I've read in dozens of posts, I'm still not having any luck with one last part of this.
What I have is a parent div that houses two rows of additional divs. The first row is a single div and contains a label with a link. The second row contains multiple divs side-by-side.
The first row (label/link) is centering just fine. What I'm having trouble with is centering the second row of divs. They are all side-by-side, but they are displaying as if I were left-justifying them.
Here is my CSS:
div.parent-container {
position:absolute;
background-color:#fff;
top:32px;
left:-1px;
width:418px;
height:67px;
border-right:solid 1px #000;
border-left:solid 1px #000;
border-bottom:solid 1px gray;
padding-left:2px;
text-align:center;
float:left;
}
div.text-label a {
position:absolute;
background-color:#fff;
font-family:Microsoft Sans Serif,Arial;
font-weight:bold;
width:417px;
height:15px;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
div.sub-container {
position:relative;
width:30px;
height:auto;
top:20px;
float:left;
padding-right:5px;
margin-left:auto;
margin-right:auto;
}
span.span-text {
position:relative;
font-weight:bold;
font-family:Microsoft Sans Serif,Arial;
font-size:11px;
width:30px;
height:auto;
}
div.img1 {
height:26px;
width:18px;
background:url(sprite.png) -72px -144px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img2 {
height:26px;
width:18px;
background:url(sprite.png) -95px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img3 {
height:26px;
width:18px;
background:url(sprite.png) -117px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img4 {
height:26px;
width:18px;
background:url(sprite.png) -141px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
And my HTML:
<div class="parent-container">
<div class="text-label">link to website</div>
<div id='div1' class='sub-container'><span class='span-text'>text1</span>
<div class='img1'></div>
</div>
<div id='div2' class='sub-container'><span class='span-text'>text2</span>
<div class='img2'></div>
</div>
<div id='div3' class='sub-container'><span class='span-text'>text3</span>
<div class='img3'></div>
</div>
<div id='div4' class='sub-container'><span class='span-text'>text4</span>
<div class='img4'></div>
</div>
</div>
I've tried creating an additional div to house the second row of divs, but that didn't work either.
Any help is greatly appreciated!
jsfiddle example
You want to remove the float:left from the subcontainer divs (div.sub-container) and give them a width (about 23% due to padding, margins, etc.)
Encompass the 2nd row with another container if you want to center the elements/child div's within it.
Here's a Demo
also,if you want to center an element,you need to define its width,in the demo - i've given a width of 200px. which you can change as per your preference.
CSS for the container :
.textContainer{
margin: 0 auto;
width:200px; /* can be in percentage ,say 50% */
position:relative;
overflow:hidden;
}