I'm trying to create a stack of playing cards in CSS, where each card is slightly offset diagonally from the one before it. Here's what it would look like:
.card {
float: left;
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
}
.card:nth-child(2) {
margin-left: -98px;
margin-top: -2px;
}
.card:nth-child(3) {
margin-left: -98px;
margin-top: -4px;
}
.card:nth-child(4) {
margin-left: -98px;
margin-top: -6px;
}
/* and so on... */
Example: http://jsfiddle.net/coev55w6/
I know I can do it by specifying different margins for each card, but I was wondering if there was a better way.
It's easy enough to create a purely horizontal offset:
.card {
float: left;
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
}
.card:not(:first-child) {
margin-left: -98px;
}
Purely vertical is easy too. But is there a way to get a diagonal offset with only a couple CSS rules?
It's a little bit of a hack, but you end up with that effect if you use the second option you gave:
.card:not(:first-child)
And put a <br> after each card:
<div>
<div class=card></div><br>
<div class=card></div><br>
<div class=card></div><br>
<div class=card></div><br>
</div>
JSFiddle:
http://jsfiddle.net/e4o0k2o5/
You could probably fine-tune it if you used a line-height or something other than <br>s.
I'm not sure it you're willing or able to change you HTML, but here's a wonderful alternative HTML layout and CSS to achieve your desired card spread.
.card {
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
position: relative;
margin-top: 10px;
margin-left: 10px;
}
.card2 {
width: 100px;
height: 140px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
position: relative;
margin-top: -10px;
margin-left: 10px;
}
<div>
<div class="card">
<div class="card">
<div class="card">
<div class="card"></div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div>
<div class="card2">
<div class="card2">
<div class="card2">
<div class="card2"></div>
</div>
</div>
</div>
</div>
Related
I'm trying to add page-to-top code to a page. Everything works fine except for the positioning of the "to top" button.
I've shown the problem in this jsfiddle. You can see the To Top in the lower right. I need it to be in the lower right of the middle div.
My code is below. I looked up the fixed position description and it says it aligns to the viewport. Is there a way to override that so it aligns to a specific div?
.layout {
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
}
#toTop {
padding: 5px 3px;
position: fixed;
bottom: 0;
right: 5px;
z-index: 100;
}
<div>
<div class="layout">Left column</div>
<div class="layout">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
You should add position: relative; to .layout and position: absolute; to #toTop. The absolute positioned element will have its relative parent as base
.layout {float:left; width:150px;height:200px;border:1px solid red;position: relative;}
div > span { position: absolute; right: 0; bottom: 0; }
https://jsfiddle.net/oe9fqv3p/13/
This will do it for you.
I added the relative position and in the div > span positioned it absolute and right 0 and bottom 0
I have changed couple of styles in your CSS code. The example is here
https://jsfiddle.net/2yms90qz/
Though i am not sure if you want something like this. Please let me know.
I have removed float from your divs and added inline-block as display. Also changed some position value to achieve the result.
.layout {display: inline-block; width:150px;height:200px;border:1px solid red;}
.middle {
position: relative
}
#toTop {
/* padding: 5px 3px; */
position: absolute;
bottom: 0;
right: 0;
z-index:100;
}
<div>
<div class="layout">Left column</div>
<div class="layout middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
.layout should be positioned and .top should be absolute.
.layout{
position:relative;
}
.top{
position :absolute
}
please see
https://jsfiddle.net/ainouss/39ezf0yj/1/
If you want to keep that "To Top" button always visible on the bottom of the viewport, then you would have to position it relative to the viewport in a way that it matches the location you want, relative to the parent.
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 10px;
z-index: 100;
right: calc(35vw + 10px);
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
Note, however, that as you pointed out in your comment, this means the "To Top" would still be visible even when you scroll past that first .container element.
To avoid that, if you just want that button to be at the bottom of its column, even if that's outside of the viewport and the user needs to scroll down to get to it, then you should use position: absolute instead and also add position: relative to .layout:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
To get the best of both worlds, and make the "To Top" button stay at the bottom of the viewport until the end of the first .container is reached, and remain inside it when the user scrolls past it, you could use position: sticky:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
top: calc(100vh - 49px);
float: right;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
The only problem with this approach could be browser support.
In that case, if you really need this feature/behaviour, you could implement your own sticky element using JS and listening for the onscroll and 'onresize' events.
Alternatively, you can use JS to check if position: fixed is supported and apply one solution or another:
const hasSticky = (() => {
const el = document.createElement('div');
el.style.cssText = "position:sticky;position:-webkit-sticky;position:-ms-sticky;";
return el.style.cssText.indexOf('sticky')!==-1;
})();
if (hasSticky) {
document.getElementById('totop').classList.add('sticky');
}
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop.sticky {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
bottom: auto;
top: calc(100vh - 49px);
right: auto;
float: right;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
I changed the scroll code I was using to look for the last button on the page and to hide the To Top button when it reached it. Here is my updated jsfiddle and code. The numbers are not quite correct but I'm just posting this in case someone else runs across this problem. I'm not sure if it is the best solution but I've tested it here and it seems to work fine. My tnaks to all who replied.
<style>
.container {
display: flex;
height: 150vh;
width: 100vw;
}
.layout {float:left; width:150px;height:250px;border:1px solid red;}
.layout-middle {position:relative;float:left; width:150px;height:250px;border:1px solid red;}
#toTop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 60px;
z-index: 100;
right: calc(45.33333333% + 10px);
outline: none;
}
</style>
<div class="container">
<div class="layout">Left column</div>
<div class="layout-middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
<div><button id="button-isvisible">Button</button></div>
<script>
$(document).ready(function($){
var offset = 20;
var duration = 500;
$(window).scroll(function() {
var continue_button_pos = $('#button-isvisible').offset();
var button_top = continue_button_pos.top - 350 ;
if ($(this).scrollTop() > button_top) {
$('#toTop').fadeOut(duration);
} else if ($(this).scrollTop() > offset) {
$('#toTop').fadeIn(duration);
} else {
$('#toTop').fadeOut(duration);
}
});
});
</script>
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 got an overflow hidden container (scrollable) and within a couple of tiles with custom dropdowns for better touch usability.
The problem: I can't get the dropdown list shown above the overflow hidden grandparent:
<div id="overflow">
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
<div class="tile">
<div class="absolute"></div>
</div>
</div>
#overflow{
height: 190px;
width: 200px;
border: 1px solid black;
overflow: hidden;
}
.tile {
clear: both;
margin: 10px 0 0 10px;
width: 180px;
height: 50px;
position: relative;
border: 1px solid green;
z-index: auto;
}
.absolute {
position: absolute;
left: 20px;
bottom: -20px;
width: 50px;
height: 30px;
border: 1px solid red;
background: red;
z-index: 99;
}
https://jsfiddle.net/enmwmtw8/
Any ideas how to achieve this?
This can't be achieved in this way. As whatever is in the overflow: hidden container can't be shown outside of it.
The only way to do this would be to place the dropdown outside the container
i'm new to HTML & CSS and was hoping someone could help me out. I'm having a problem with this page where content is not fixed in place and when I zoom in and out the containers move freely. Any idea how to fix this? Not sure what layout I should be using to prevent this from happening. Thanks
<body>
<img class="img" src="http://i824.photobucket.com/albums/zz162/nathanial292/banner_zps45abd080.png">
<div id="header">
<h3 id="header h3">
Home Servers Shop Forum About Us Contact
</h3>
</div>
<div class="left">
<h1>Server Updates</h1>
<h2><span>Hello readers</span></h2>
</div>
<div class="right">
<a id="nabblelink" href="http://hydronetworks-forums.58422.x6.nabble.com/">HydroNetworks Forums</a>
<script src="http://hydronetworks-forums.58422.x6.nabble.com/embed/f1"></script>
</div>
<div id="footer">All Rights Reserved 2013 HydroNetwork</div>
</body>
#header{
z-index: 1;
border-radius: 5px;
height: 50px;
width: 600px;
background-color: #585858;
border: solid #383838 6px;
position: absolute;
margin-top: 25px;
margin-left:640px;
min-width: 480px;
}
.right{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 400px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-right: 50px;
font-family: Ebrima;
overflow:auto
}
.left{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 600px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-left:150px;
margin-right: 750px;
text-align: center;
font-family: Ebrima;
}
When you zoom in the content moves to the right and bottom, because you used pixel values.
At any rate you should remove
<body background= "http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png">
from your HTML-Code.
And add this to your CSS-Code:
body{
background: url(http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png);
background-position: top center;
}
If you don't want the divs to "move" when zooming, you should use percentages like width: 50%.
<html>
<head>
<title>Pixafy</title>
<style>
html {
background: url(wp.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.wp.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='wp.jpg', sizingMethod='scale')";
padding-top: 50px;
}
#ldiv {
vertical-align: top;
height: 120px;
width: 40%;
color:#ccc;
float: left;
position: relative;
border: 1px solid yellow;
}
#rdiv {
vertical-align: top;
float: left;
width: 40%;
border: 1px solid blue;
height: 120px;
}
#ctr {
vertical-align: middle;
width: 80%;
height: 150px;
border: 1px solid white;
background:url(mid.png) no-repeat center center;
}
#container1 {
vertical align: top;
width: 80%;
height: 300px;
border: 1px solid green;
background-color: #E3E3E3;
}
#container2 {
vertical align: top;
width: 80%;
height: 250px;
border: 1px solid green;
background-color: #000000;
}
#text1 {
align: left;
width: 80%;
color: #000000;
font-family: Arial, Vedana, Tahoma;
font-size: 24px;
font-weight: bold;
}
#space {
height: 25px;
border: 1px solid purple;
width: 80%;
}
ul {
list-style-type: none;
height: 80px;
width: 500px;
margin: auto;
}
li {
float: left;
}
ul a {
background-color: #29281E;
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
padding-left: 20px;
padding-top: 6px;
padding-bottom: 6px;
display: block;
line-height: 22px;
text-decoration: none;
font-weight: bold;
font-family: Verdana, "Times New Roman", Times, serif;
font-size: 14px;
color: #D6D7D8;
}
.clear-both {
clear: both;
}
#text2 {
width: 70%;
border: 1px solid #00CCFF;
color: #000000;
font-size: 16px;
font-family: Arial, Verdana, Tahoma;
font-weight: bold;
}
#btn {
width 10%;
border: 1px solid #FFCC00;
vertical-align:bottom;
}
.btnlearn {
clear:both;
width:125px;
height:40px;
background:#E55D22;
text-align:center;
line-height:40px;
color:#FFFFFF;
font-size:12px;
font-weight:bold;
cursor: pointer;
}
.btnlearn:hover {
text-decoration: underline;
cursor: pointer;
}
#rcw {
width: 80%;
color: #BAB8B8;
font-size: 18px;
font-size: Arial, Verdana, Tahoma;
}
#left
{
width: 33%;
float: left;
border: 1px solid yellow;
display: inline-block;
height: 250px;
}
#right
{
width: 33%;
float: left;
border: 1px solid white;
display: inline-block;
height: 250px;
}
#mid
{
width:33%;
float: left;
border: 1px solid red;
display: inline-block;
height: 250px;
}
</style>
</head>
<body>
<div width=100% style="margin: 0 auto;">
<div id="ldiv"><img src="pixafy.png" style="position: absolute; left: 0px;" /></div>
<div id="rdiv">
<ul>
<li>Home</li>
<li>Services</li>
<li>Works</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="clear-both"></div>
<div id="ctr"></div>
<div class="clear-both"></div>
<div id="space"></div>
<div class="clear-both"></div>
<div id="container1" style="position: relative;">
<div id="text1" style="position: absolute; left: 25px; top: 15px;">We are a company of experts developer based in New York City.<br>Partner with us to achieve your business goals through technology.</div>
<div class="clear-both"></div>
<div id="text2" style="position: absolute; left: 25px; top: 85px; overflow: auto">Our talented and experienced team has over 10 years of experience developing world-class websites and applications, and we leverage the latest technologies, content management solutions, open source platforms and web standards to solve any challenge.</div>
<div id="btn" style="position: absolute; right: 45px; top: 100px;"><input type=button class=btnlearn value="Learn More" /></div>
<div class="clear-both"></div>
<div id="rcw" style="position: absolute; left: 25px; top: 175px;">Recent Work</div>
<img src="1.png" style="position: absolute; left: 150px; bottom: 0px;" />
<img src="2.png" style="position: absolute; left: 400px; bottom: 0px;" />
<img src="3.png" style="position: absolute; left: 650px; bottom: 0px;" />
</div>
<div class="clear-both"></div>
<div id="container2" style="position: relative;">
<div id=left stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</span>
<div class="clear-both"></div>
<img src="wd.png" style="position: relative; left: 25px; top: 40px;" />
<span style="position: relative; width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</span>
</div>
<div id=right stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</span>
</div>
<div id=mid stlye="position: absolute;">
<span style="position: relative; top: 25px; left: 25px; color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</span>
</div>
</div>
</div>
</body>
</html>
Outpost
I want to wrap it so I can have the similar contents in the next two DIV as well.
Not sure why is there a tab on the first line and giving me this issue.
Can someone tell me why is it going over to the next DIV?
Please help me resolve this issue.
I would like to make it look like this:
I'm giving you an answer but request you to learn about Semantic HTML and CSS Positioning. That'd help you out a lot.
Now, as far as this example is concerned, you're over-using CSS Positioning. KISS principle states that the html should be very simple and easy to style. Yours is but is not semantic. I've made it semantic and have then added correct styles to mimic what you want.
New screenshot:
JS Fiddle Demo: http://jsfiddle.net/q9Rvq/3/
Added CSS:
#container2 > div h5{
text-align:center;
margin:5px 0px;
}
#container2 > div img{
float:left;
margin-left:20px;
}
#container2 > div p{
margin-left:55px;
margin-right:10px;
margin-top:0px;
width:auto;
}
Edited HTML:
<div id="container2" style="position: relative;">
<div id=left stlye="">
<h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">Website Development</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
<div id=right stlye="">
<h5 style="color: #FFFFFF; font-size: 19px; font-weight: bold;">eCommerce Solutions</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
<div id=mid stlye="">
<h5 style="color: #FFFFFF; font-size: 17px; font-weight: bold;">Mobile Phone Applications</h5>
<div class="clear-both"></div>
<img src="wd.png" style="" />
<p style="color: #ffffff; border: 1px solid green;">Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
<span style="position: relative; bottom: 0px; right: 15px;">Learn More</span>
</div>
</div>
The content is overflowing because the element is relatively positioned. As some people have commented you should try not to use too much positioning as it will hinder you from creating layouts that reflow. You could also apply a width to the element to wrap the text.
The HTML for the picture you show should look like this:
<div>
<h3>eCommerce Solutions</h3>
<img alt="" src="">
<p>Our team will...</p>
Learn More
</div>
Css could look like this:
div {
width: 300px;
height: 200px;
background-color: #000;
color: #fff;
padding: 20px;
}
div img {
float: left;
margin: 0 10px 10px 0;
}
div a {
float: right;
}
Fiddle: http://jsfiddle.net/LM5MZ/3/
In this jsFiddle (don't mind the broken images...) I've only made a slight tweak to the style attribute of the <span/> tag holding the text which is overflowing. I replaced position: relative; width: 25%; top: 40px; with margin: 40px 5px 5px 80px;display: inline-block; The display: inline-block tells the browser to render the element with a box model which is required for the margin: 40px 5px 5px 80px attribute to be respected. This keeps the content within its containing parent <div/> tag.
However, it's still overflowing the bottom, probably because of the absolute positioning. If you wanted it to scroll, you could apply overflow: auto to that <div/> but I don't think that's the look you're going for.
This is the span tag you have which is holding the text that is bleeding over:
<span style="position:relative;width: 25%; top: 40px; left: 80px; color: #ffffff; border: 1px solid green;">
The div, called #left, has a style which sets
width:33%
so it is a fixed width. the "left:80px" in your span style is forcing the text outside of the fixed width left div. So, just move it to the right, try left: 0px instead.
The problem is the misuse of position. It's better in this case to use padding.
Here is some tidy html taking use of css, padding and a little floating:
HTML
<div id="BoxContainers">
<div class="boxes left">
<div class="innerBox">
<div class="title">Website Development</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Custom websites and easy-to-use content management solutions that are scalable, robust and cross browser compatible. Our team has knowledge and experience in all web technologies.</p>
Learn More
</div>
</div>
</div>
<div class="boxes right">
<div class="innerBox">
<div class="title">eCommerce Solutions</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Our team will collaborate with you to understand your online objectives and goals, using that information to build a secure and reliable web-based storefront.</p>
Learn More
</div>
</div>
</div>
<div class="boxes centre">
<div class="innerBox">
<div class="title">Mobile Phone Applications</div>
<img src="wd.png" alt="" />
<div class="content">
<p>Our team specializes in developing mobile applications and websites that deliver on quantity, performance and speed.</p>
Learn More
</div>
</div>
</div>
</div>
CSS
#BoxContainers {
height: 250px;
border: 1px solid green;
color: #ffffff;
background: #000000;
position: relative;
}
.boxes {
width: 33%;
float: left;
height: 250px;
}
.boxes.left {
border: 1px solid yellow;
}
.boxes.right {
border: 1px solid white;
}
.boxes.mid {
border: 1px solid red;
}
.boxes .innerBox {
padding: 25px;
}
.boxes .title {
font-size: 19px;
font-weight: bold;
margin-bottom: 10px;
}
.boxes img {
float: left;
}
.boxes .content {
padding-left: 55px;
}
.boxes .content p {
margin-top: 0;
}
Demo
Take note, there is no inline styling. Avoid using inline styling, even for mocking something up quickly. If you are using css properly, it will be quicker putting your css in a stylesheet and using classes to reuse your styles.