Text won't fit appropriately when using margin or padding?
I'm not a web developer but a Photoshop developer, I decided to create a nice list style to add to my personal Wordpress blog . I did a design inspired a lot from material design which came out very well as shown below.
So, I decided to try my hand at creating html and css designs that ended up looking like this.
I tried adding some margins and padding to the text, but it doesn't seem to move the content text to the right. What should I do to fix this?
html code -
<div>
<ul>
<li class="paper">
<div class="papercontent">
<img class="pimg" src="http://127.0.0.1:8080/wordpress/wp-content/uploads/2014/12/oneplus-one-top10.png" alt="oneplus-one-top10" width="452" height="300" />
<p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
<p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
</div>
</li>
My custom css other than wordpress post css -
.paper {
background-color: rgb(255, 255, 255);
box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
font-size: 1.8em;
padding: 30px;
font-weight: 300;
font-family: 'Helvetica Neue',sans-serif;
}
.pnumber
{
color:white;
}
.pheader
{
font-size:35px;
}
.papercontent
{
background-color: rgb(253, 19, 126);
}
.ptext
{
margin-right: .1em;
margin-left: .1em;
font-size: 0.8em;
padding: 30px;
font-weight: 300;
font-family: 'Helvetica Neue',sans-serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
ul {
list-style-type: none;
}
.pimg {
max-width: 100%;
float: left;
height: auto;
}
If my methods are wrong, please guide me on the right path. Thanks you
Check out my PEN I personally like to separate areas within elements for more granular control. In this case, I have wrapped your photo and text in 2 separate divs so that they can float next to each other.
I added box-sizing: border-box
to all elements so you can overlay text (since the addition is added inside the borders of the elements) without affecting the width / layout of the list item - you should use this if you like the width, for example 60% + 40% = 100%. Without this, the addition will be added to the outside, thus breaking your layout as your divs will no longer be 100%.
HTML:
<div id="main">
<ul>
<li class="paper">
<div class="papercontent">
<div class="inner first">
<img class="pimg" src="http://placekitten.com/g/350/350" alt="oneplus-one-top10" />
</div>
<div class="inner second">
<p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
<p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
</div>
</div>
</li>
</ul>
</div>
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#main {
display: block;
margin: auto;
max-width: 830px;
}
ul {
margin: 0;
padding: 0;
}
.paper {
background-color: rgb(255, 255, 255);
box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
font-size: 1.8em;
padding: 30px;
font-weight: 300;
font-family: 'Helvetica Neue',sans-serif;
}
.pnumber
{
color:white;
}
.pheader
{
font-size:35px;
margin: 0;
}
.papercontent
{
background-color: rgb(253, 19, 126);
float: left;
}
.ptext
{
font-size: 0.8em;
font-weight: 300;
font-family: 'Helvetica Neue',sans-serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
ul {
list-style-type: none;
}
.pimg {
max-width: 100%;
float: left;
height: auto;
}
.inner {
float: left;
}
.inner.first {
width: 40%;
}
.inner.second {
width: 60%;
padding: 16px;
}
source to share
.pimg {
max-width: 100%;
float: left;
height: auto;
margin-right: 20px; /* add */
}
working demo http://jsfiddle.net/aavk7g9m/2/
source to share