Trying to give some margin between div.header and div.Main_2, but the div.header overlaps div.Main_2 because of "position: fixed;".
I tried with "margin-bottom: 50px;", but it still remains superimposed.
Is there any way to make the margin with the least possible code, without take out the "position: fixed;"?
CSS:
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-bottom: 50px;
}
HTML:
<body>
<div class="Main_1">
<div class="header">
MyHeader
</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</body>
Since 42 is "the answer to the Ultimate Question of Life, the Universe, and Everything", try setting margin-top:42px; to your class Main_2
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-bottom: 50px;
}
.Main_2 {
margin-top:42px;
}
<body>
<div class="Main_1">
<div class="header">
MyHeader
</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</body>
Or, as suggested in the comment by #KarlenKishmiryan you can also use padding on your body:
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-bottom: 50px;
}
body {
padding-top:42px;
}
<body>
<div class="Main_1">
<div class="header">
MyHeader
</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</body>
If you have a container with position: fixed | absolute. Set in the parent the height to a fixed number and position: relative for it so the space is reserved.
.header {
font-size: 10px;
text-align: left;
background-color: #333333;
font-weight: bold;
color: #FFFFFF;
padding: 10px;
border-bottom: 3px solid #4eb151;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.container {
height: 42px;
position: relative;
}
<div class="Main_1">
<div class="container">
<div class="header">MyHeader</div>
</div>
<div class="Main_2">
<input type="file" name="BttFile" accept="" required class="PathInputFile">
<input type="submit" class="SubmitStyle_1" value="Upload" name="Upload">
</div>
</div>
Related
I have three inputs with a span before and a div after, the last having an i element immediately after:
<div class="container-fluid">
<form id="recaptcha_form">
<fieldset class="form-group">
<legend class="form_legend">Create Account</legend>
<div class="form_field">
<span class="validate_symbol">✗</span>
<input type="text" class="register_field" id="id_username">
<div style = "display:none" class="error" aria-live="polite"></div>
</div>
<div class="form_field">
<span class="validate_symbol">✗</span>
<input type="text" class="register_field"id="id_username">
<div class="error" aria-live="polite"></div>
</div>
<div class="form_field">
<span class="validate_symbol" >✗</span>
<input type="text" class="register_field"id="id_username">
<i id="password_toggle">SHOW</i>
<div class="error" ></div>
</div>
</fieldset>
</form>
</div>
CSS
input{
width: 200px;
}
/* Error messages below input */
.error{
/* Same width as above input */
width: 200px;
/* Width of .validate_symbol */
margin-left: 20px;
font-size: small;
color: white;
background-color: #b30000;
text-align: center;
}
.validate_symbol{
color: red;
font-size: 20px;
margin-right: none;
}
/* SHOW/HIDE password element */
#password_toggle{
margin-left: -45px;
cursor: pointer;
font-size: 10px;
}
Which results in:
I have also added CSS:
body{
text-align: center;
}
form {
display: inline-block;
}
Which results in:
The .error div still not being perfectly aligned with the above input and added "show" text causing misalignment of the password field.
I would like to center the input elements, while keeping the .validate_symbol elements immediately before on all screen sizes and perfectly align the .error divs with the above input elements.
I recreated your code (simplifying the class names) and this was the result:
Here my code, I hope it helps! 🖖🐱🚀
HTML:
<div class="container">
<form action="#">
<fieldset>
<legend>Create Account</legend>
<div class="wrapper">
<input type="text">
<div class="error">I am an error.</div>
</div>
<div class="wrapper">
<input type="text">
<div class="error">I am an error.</div>
</div>
<div class="wrapper">
<input type="text">
<div class="error">I am an error.</div>
</div>
</fieldset>
</form>
</div>
CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
.container {
width: 300px;
}
.container form fieldset {
appearance: none;
width: 100%;
margin: 0;
padding: 0;
display: grid;
grid-auto-flow: row;
gap: 1rem;
border: none;
}
.container form fieldset legend {
appearance: none;
width: 100%;
margin: 0;
padding: 1rem 1rem 1rem 2rem;
position: relative;
display: block;
font-size: 1.5rem;
font-weight: bold;
}
.container form fieldset .wrapper {
width: 100%;
padding: 0 0 0 2rem;
position: relative;
display: grid;
grid-auto-flow: row;
}
.container form fieldset .wrapper input {
appearance: none;
width: 100%;
margin: 0;
padding: 1rem;
position: relative;
border: none;
}
.container form fieldset .wrapper .error {
width: 100%;
padding: 0.5rem;
background-color: red;
}
.container form fieldset .wrapper:before {
content: "X";
position: absolute;
top: 0.25rem;
left: 0.25rem;
font-weight: 900;
color: red;
}
Im working on a project, but my elements are very spaced out and I'm not the best at CSS. I don't know if it's doing it on it's own or something is wrong with my CSS. Can you please help find the problem?
<body>
<div class='top'>
<div class='top-left'>
<input type='text' class='info' id='totalBill' placeholder='Total bill'>
<input type='text' class='info' id='peopleAmount' placeholder='People'>
</div>
<div class='top-right'>
<div class='tip'>
<input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
</div>
<button onclick = "calculate()"> Calculate </button>
</div>
</div>
<div class="bottom">
<input id="output" disabled>
<input id="moneyOutput" disabled>
</div>
</body>
</html>
CSS File Link - https://aaryank.codewizardshq.com/BillSplitter/style.css
Just replace the justify-content: space-around; to the justify-content: center; this will leave small space between your inputs and also reduce the height if you like like the following in your edited code
* {
outline: none;
border: none;
font-family: 'Fira Sans', sans-serif;
margin: 0;
}
.top-left,
.top-right {
position: absolute;
height: 60vh;
width: 50vw;
top: 0;
}
.top-right {
right: 0;
background: #7ACFD7;
}
.top-left {
left: 0;
background-color: #C22629;
}
.bottom {
position: absolute;
height: 40vh;
/*edited from height: 60vh;*/
width: 100vw;
bottom: 0;
left: 0;
background-color: #F1EFEE;
}
.top-left,
.top-right,
.bottom {
flex-direction: column;
display: flex;
justify-content: center;
/*Edited from justify-content: space-around;*/
place-items: center;
}
/**/
input[class='info'] {
font-size: 20px;
padding: 15px;
border-radius: 5px;
background: #FFF;
margin: 10px;
font-family: 'Fira Sans', sans-serif;
display: block;
}
input,
input::placeholder {
color: grey;
}
button {
font-size: 18px;
padding: 15px;
width: 50%;
;
background-color: transparent;
color: #F1EFEE;
border: 3px solid #F1EFEE;
border-radius: 10px;
cursor: pointer;
}
#output {
font-size: 20px;
background-color: transparent;
border-radius: 5px;
text-align: center;
color: black;
width: 50%;
}
#moneyOutput {
font-size: 50px;
padding: 5px;
background-color: transparent;
border-radius: 5px;
text-align: center;
color: black;
width: 50%;
}
<div class='top'>
<div class='top-left'>
<input type='text' class='info' id='totalBill' placeholder='Total bill'>
<input type='text' class='info' id='peopleAmount' placeholder='People'>
</div>
<div class='top-right'>
<div class='tip'>
<input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
</div>
<button onclick="calculate()"> Calculate </button>
</div>
</div>
<div class="bottom">
<input id="output" disabled>
<input id="moneyOutput" disabled>
</div>
I am trying to arrange my <div>s one below the other but they still end up on the same line, I tried using row and col approach but still it's not working, Answers on SO also didn't work.
Currently my code is like this
.dragAndDropBox{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gray;
border-radius: 5px;
}
.dragAndDropBox .dragAndDropUpload{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar{
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText{
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
font-family: Arial
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input
accept="image/*"
class="dragAndDropUpload"
type="file"
/>
<div class="dragAndDropText">Drag / Browse</div>
<div
bsstyle="success"
class="dragAndDropProgressBar mt-1 progress">
<div
role="progressbar"
class="progress-bar progress-bar-striped"
style="width: 0%;"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
/>
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I am using Bootstrap 4.3.1
The <div>s have position: absolute which puts them on top of each other.
I would suggest adding position: relative to .dragAndDropBox so all the absolutely positioned elements have a relative element to refer to.
Here's the fiddle: https://jsfiddle.net/yjdkne3b/
.dragAndDropBox {
position: relative;
width: 80%;
height: 200px;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover {
background-color: gray;
}
.dragAndDropBox .dragAndDropUpload {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar {
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText {
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input accept="image/*" class="dragAndDropUpload" type="file" />
<div class="dragAndDropText">Drag / Browse</div>
<div bsstyle="success" class="dragAndDropProgressBar mt-1 progress">
<div role="progressbar" class="progress-bar progress-bar-striped" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I hope this is the solution you are looking for.
Also, you don't have to repeat the properties from the element on hover. If only the background changes on hover it's ok to change just that and the other properties will remain the same. :)
Use <br> as a line break (end-of-line).
I think it is because of the "position: absolute" in your CSS. This makes block elements only use as much space as they need.
You can read more about this here: Does adding a position: absolute to a block element make it behave like an inline?
As you can see i goes straight to the middle instead of the starting point of the div. I have set a margin and width for my div and when I do input an <H1> tag, the text just floats to the middle of the div instead of the far left where the div begins. I have set the width so it can start at that starting point not 45px to the left.
This is the HTML
<div id="topbar">
<div id="logo"> <img src="Pictures/bbc.png"> </div>
<div id="signin" class="border-part"> </div>
<div> <img id="logo-image" src="Pictures/signin.png">
<p class="signin-text">Sign in</p>
</div>
<div id="dash"> <img id="dash-image" src="Pictures/bash2.png"> </div>
<div> <img id="bell"src="Pictures/bell3.png"> </div>
<div class="border-part stuff-section"> News </div>
<div class="border-part stuff-section"> Sport </div>
<div class="border-part stuff-section"> Weather </div>
<div class="border-part stuff-section"> iPlayer </div>
<div class="border-part stuff-section"> TV </div>
<div class="border-part stuff-section"> Radio </div>
<div class="border-part stuff-section"> More </div>
<div class="seacher-border">
<input id="search-box" type="text" placeholder="Search">
<img id="search-pic" src="Pictures/search.png"> </div>
</div>
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
This is my CSS
#topbar {
width: 1080px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.border-part {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
}
#logo-image {
width: 20px;
margin: 12px;
float: left;
}
.signin-text {
margin: 14px;
font-size: 90%;
font-weight: bold;
float: left;
}
#dash-image {
padding-left: 50px;
float: left;
height: 40px;
}
#bell {
margin: 8px;
height: 28px;
float: left;
}
.stuff-section {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
.seacher-border {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
margin-left: 20px;
}
#search-box {
margin: 10px;
font-weight: bold;
background-color: #E4E4E4;
font-size: 14px;
border: none;
height: 24px;
float: left;
}
#search-pic {
position: relative;
right: 10px;
top: 10px;
height: 25px;
}
#second-bar {
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
width: 1080px;
margin: 0 auto;
background-color: blue;
}
h1 {
padding: 0;
margin: 0;
float;
}
A flexbox option for alignment
#second-bar {
display: flex;
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
display: flex;
justify-content: flex-start; /* horizontal alignment - change to flex-end or center to see difference */
align-items: center; /* vertical alignment */
width: 100%;
margin:0 auto;
}
h1 {
display: flex;
padding:0;
margin:0;
}
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/zn4qkok2/
A possible non-flexbox solution
#second-bar {
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
text-align: left; /* change to center or right to see difference */
vertical-align: middle;
width: 100%;
line-height: 80px; /* match to height of parent for centered vertical alignment */
margin:0 auto;
}
h1 {
display: inline-block;
padding:0;
margin:0;
}
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
fiddle
https://jsfiddle.net/Hastig/zn4qkok2/1/
Just add clear: both to h1:
#topbar {
width: 1080px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0;
padding: 0;
font-family: Helmet, Freesans, Helvetica, Arial, sans-serif;
;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.border-part {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
}
#logo-image {
width: 20px;
margin: 12px;
float: left;
}
.signin-text {
margin: 14px;
font-size: 90%;
font-weight: bold;
float: left;
}
#dash-image {
padding-left: 50px;
float: left;
height: 40px;
}
#bell {
margin: 8px;
height: 28px;
float: left;
}
.stuff-section {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
.seacher-border {
float: left;
height: 100%;
border-left: 1px #CCCCCC solid;
margin-left: 20px;
}
#search-box {
margin: 10px;
font-weight: bold;
background-color: #E4E4E4;
font-size: 14px;
border: none;
height: 24px;
float: left;
}
#search-pic {
position: relative;
right: 10px;
top: 10px;
height: 25px;
}
#second-bar {
background-color: #BB1919;
width: 100%;
height: 80px;
}
#newsbar {
width: 1080px;
margin: 0 auto;
background-color: blue;
}
h1 {
padding: 0;
margin: 0;
clear: both;
}
<div id="topbar">
<div id="logo"> <img src="Pictures/bbc.png"> </div>
<div id="signin" class="border-part"> </div>
<div> <img id="logo-image" src="Pictures/signin.png">
<p class="signin-text">Sign in</p>
</div>
<div id="dash"> <img id="dash-image" src="Pictures/bash2.png"> </div>
<div> <img id="bell" src="Pictures/bell3.png"> </div>
<div class="border-part stuff-section"> News </div>
<div class="border-part stuff-section"> Sport </div>
<div class="border-part stuff-section"> Weather </div>
<div class="border-part stuff-section"> iPlayer </div>
<div class="border-part stuff-section"> TV </div>
<div class="border-part stuff-section"> Radio </div>
<div class="border-part stuff-section"> More </div>
<div class="seacher-border">
<input id="search-box" type="text" placeholder="Search">
<img id="search-pic" src="Pictures/search.png"> </div>
</div>
<div id="second-bar">
<div id="newsbar">
<h1>NEWS</h1>
</div>
</div>
<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.