I can't understand where the space is coming from at the top-front of my first column.
Both columns should begin at the same horizontal line.
Ignore the margin values.
That was for aligning it horizontally with the rest of the container.
#import url('//fonts.googleapis.com/css?family=Roboto');
.column {
font: 12px 'Roboto';
column-count: 2;
column-gap: 2em;
max-width: 52%;
min-width: 300px;
margin: 30px 0 auto 25%;
}
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sem rhoncus orci dapibus posuere ut id justo. Maecenas in venenatis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean dignissim neque
sit amet erat placerat hendrerit. Mauris faucibus id elit quis varius. Praesent egestas eu nunc sit amet fermentum. Duis ac hendrerit orci. Nulla sed metus ullamcorper, molestie dolor vitae, lobortis tellus. Aliquam sagittis tortor eu lectus rhoncus,
et ullamcorper ante rutrum. Etiam tincidunt rhoncus ligula, scelerisque molestie quam. Etiam a nisl in nibh congue pulvinar sit amet non nibh. Vivamus vel tincidunt sapien. Nullam leo ipsum, tincidunt molestie fermentum a, cursus quis ipsum.</p>
</div>
View on JSFiddle
This is simply the default margin of p tag applied to the first column of your div. More precisely the margin-top as you may also notice a margin-bottom applied to the second column:
You can apply your column property to the p instead of the div to avoid this behavior:
#import url('https://fonts.googleapis.com/css?family=Roboto');
.column {
column-gap: 2em;
max-width: 52%;
min-width: 300px;
margin: 30px 0 auto 25%;
}
p {
font: 12px 'Roboto';
column-count: 2;
}
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sem rhoncus orci dapibus posuere ut id justo. Maecenas in venenatis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean dignissim neque
sit amet erat placerat hendrerit. Mauris faucibus id elit quis varius. Praesent egestas eu nunc sit amet fermentum. Duis ac hendrerit orci. Nulla sed metus ullamcorper, molestie dolor vitae, lobortis tellus. Aliquam sagittis tortor eu lectus rhoncus,
et ullamcorper ante rutrum. Etiam tincidunt rhoncus ligula, scelerisque molestie quam. Etiam a nisl in nibh congue pulvinar sit amet non nibh. Vivamus vel tincidunt sapien. Nullam leo ipsum, tincidunt molestie fermentum a, cursus quis ipsum.</p>
</div>
The 2 columns is just one paragraph element split into two columns. The space above the first one is just the margin-top on the first column. Just give the paragraph a margin-top: 0;
Related
I want to stack a div over 2 other divs, all 3 with unknown content, so the padding bottom of 1 and padding top of 3 should not be hardcoded. Is there any CSS-only solution for this?
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px
}
.stacked .first {
background: red;
padding-bottom: 100px
}
.stacked .third {
background: blue;
padding-top: 100px
}
.stacked .second {
margin: 0 auto;
max-width: 50%;
position: relative
}
.stacked .second>div {
background: green;
display: block;
padding: 20px;
position: absolute;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>
As you want items to be placed with space for their content we cannot have the inner (green) div positioned absolute.
This snippet has the first second and third divs just one below the other as standard. The first and third have their red and blue backgrounds respectively.
The second has a linear-gradient background, half red, half blue.
This snippet uses flex to position the texts centrally within each div but of course you can remove that if required.
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px;
display: flex;
align-items: center;
}
.stacked .first {
background: red;
}
.stacked .third {
background: blue;
}
.stacked .second {
background-image: linear-gradient(red 0 50%, blue 50% 100%);
display: flex;
align-items: center;
justify-content: center;
}
.stacked .second>div {
max-width: 50%;
background: green;
padding: 20px;
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>
I can't figure out what's blocking here, or if it's just not possible. I wanted to put together what seemed like a simple design, right aligned sidebar with the content of the sidebar aligned in the bottom, the main content flowing freely but not going underneath the sidebar, yet I can't get it right. This is as close as I can get it, but I can't get the background to run along the whole height.
.main_box {
width: calc(100% - 300px);
float:left;
background-color: green;
}
.side_panel {
float: right;
height: 100%;
background-color: blue;
}
.bottom_nav {
background-color: red;
width: 300px;
position: fixed;
right: 0;
bottom: 0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus, enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla. Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
when using a position:fixed the element you will get removed from the normal flow making its parent element empty like it doesn't exist.
Consider the parent element to be fixed then place the content inside at the bottom:
.main_box {
width: calc(100% - 300px);
float: left;
background-color: green;
}
.side_panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 300px;
background-color: blue;
}
.bottom_nav {
background-color: red;
position: absolute;
right: 0;
bottom: 0;
width:100%;
}
body {
margin:0;
}
<div class="main_box">
<div class="side_panel">
<div class="bottom_nav">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae
metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus,
enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla.
Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
<p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit
nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit
arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>
Have not worked much on UI front. I have a main div , and 2 nested div's. The 2 div's appear one besides the other, but when I resize the window the div's stack one below the other. My requirement is, Though I resize the window the divs should be place one besides the other and browser window should have a scroll bar horizontally to scroll right if i want to see the contents.
I did try various approaches but could not succeed.
body {
background-color: white;
}
#mainContainer {
overflow: hidden
}
#firstBox {
background-color: gray;
margin: 10px;
padding: 10px;
overflow-x: auto;
width: 45%;
height: 30%;
float: left;
display: inline-block;
}
#secondBox {
background-color: gray;
margin: 10px;
padding: 10px;
overflow: auto;
width: 45%;
height: 30%;
float: left;
display: inline-block;
position: fixed;
}
<div id="mainContainer">
<div id="firstBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec
</div>
<div id="secondBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non blandit class, eget odio eu, mollis mauris massa. In augue erat convallis, morbi lectus lobortis tempor in lorem. Dis
et morbi consectetuer non, tempor pretium. Leo dolor erat orci, lobortis adipisicing scelerisque integer diam lorem, tempus non, dolor libero vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet fermentum sit ipsum. Erat dapibus nulla
justo vitae, feugiat nullam felis sollicitudin, dolor wisi mauris, tristique tempus nunc tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum id ornare, ac facilisi wisi maecenas sem ultrices, non pede cupiditate mollis lorem condimentum,
suscipit integer etiam mauris amet. Magna rutrum cras, tincidunt lacus ut, lectus donec,
</div>
</div>
The above code is already working fine and it isn't stacking one below the other I guess, can you tell me when did it stack one below the other.
Just try this add width to container & child elements.
#mainContainer
{
width:1490px;
height:auto;
overflow-x: auto;
}
#firstBox {
background-color: gray;
margin: 10px;
padding: 10px;
width: 700px;
height: auto;
float: left;
}
#secondBox {
background-color: gray;
margin: 10px;
padding: 10px;
width: 700px;
height: auto;
left:750px;
float: left;
}
<div id="mainContainer">
<div id="firstBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum
ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non
blandit class, eget odio eu, mollis mauris massa. In augue erat
convallis, morbi lectus lobortis tempor in lorem. Dis et morbi
consectetuer non, tempor pretium. Leo dolor erat orci, lobortis
adipisicing scelerisque integer diam lorem, tempus non, dolor libero
vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet
fermentum sit ipsum. Erat dapibus nulla justo vitae, feugiat nullam
felis sollicitudin, dolor wisi mauris, tristique tempus nunc
tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum
id ornare, ac facilisi wisi maecenas sem ultrices, non pede
cupiditate mollis lorem condimentum, suscipit integer etiam mauris
amet. Magna rutrum cras, tincidunt lacus ut, lectus donec
</div>
<div id="secondBox" class="gridContainer">
Lorem ipsum dolor sit amet, nullam eros posuere quam, non ipsum
ornare vehicula. In integer, ac tempus aenean lorem nec amet ac, non
blandit class, eget odio eu, mollis mauris massa. In augue erat
convallis, morbi lectus lobortis tempor in lorem. Dis et morbi
consectetuer non, tempor pretium. Leo dolor erat orci, lobortis
adipisicing scelerisque integer diam lorem, tempus non, dolor libero
vivamus velit. Viverra ipsum quam id in arcu, ligula tortor laoreet
fermentum sit ipsum. Erat dapibus nulla justo vitae, feugiat nullam
felis sollicitudin, dolor wisi mauris, tristique tempus nunc
tristique. Velit non, duis auctor a. Ipsum pede maecenas vestibulum
id ornare, ac facilisi wisi maecenas sem ultrices, non pede
cupiditate mollis lorem condimentum, suscipit integer etiam mauris
amet. Magna rutrum cras, tincidunt lacus ut, lectus donec,
</div>
</div>
I have the following html/css:
#wrapper {
width: 400px;
background-color: red;
}
#text {
margin-right: 50px;
}
#subcontent {
float: right;
width: 50px;
}
<div id="wrapper">
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
</div>
This is achieving the desired effect of making the text stay left and the sub content stay right, without having to specify a width for the text (for responsive behaviour). However, semantically this is incorrect as I have had to place <div id="subcontent"/> before <div id="text"/> in the html, even though the text should appear before the sub content (assuming reading rtl). I can live with this to get the job done but unfortunately when the screen size is very small I need to make <div id="text"/> full width and let the sub content flow naturally afterwards. This currently means the sub content is at the top and I need it to be at the bottom.
How can I change the css so that when the html is ordered
<div id="text"/>
<div id="subcontent"/>
the sub content will float right without being pushed down by the text?
I need to support IE9+
Float is a pain.
Try to use flex and media queries for a responsive design :
Note: since you mention rtl reading, I strongly advise you to have a look on the flex-direction property (MDN)
#wrapper {
display: flex;
width: 400px;
background-color: red;
/* this is the default behavior - you can skip it */
flex-direction: row;
}
#text {
}
#subcontent {
width: 50px;
}
#media (max-width: 400px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
</div>
Something like this?
#wrapper {
width: 400px;
background-color: red;
position: relative;
}
#text {
margin-right: 50px;
}
#subcontent {
position: absolute;
top: 0;
right: 0;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
</div>
Cool. If I understand your question correctly, you are trying to change the order of the HTML, yet have the output still look the same?
If this is the case, you need to give #text AND #subcontent a float:left; add a clearing div and use a calc width on your text to make sure that the image will always fit in whilst the text can be responsively sized.
Here's a fiddle: https://jsfiddle.net/hk9ntyd2/1/
And here's the code:
#wrapper {
width: 400px;
background-color: red;
}
#text {
width: calc(100% - 50px);
float: left;
}
.clear {
clear: both;
}
#subcontent {
float: left;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
<div class="clear"></div>
</div>
The margin-left:50px; solution should have worked fine, I personally find that the calc solution is a little neater, but feel free to use margin instead :)
It might be a stupid question, but why is first-child / lastchild not working on the blockquotes?
CSS
p { margin: 0 0 1.6em 0; }
blockquote { margin: 0; padding: 0 25px 1em; background-color: #CCC; border-left: 5px solid #333; }
blockquote:first-child { padding-top: 25px; color: red; }
blockquote:last-child { padding-bottom: 25px; margin-bottom: 1em; color: yellow; }
HTML
<div>
<p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote>
<p>Integer bibendum erat ipsum, ac sodales nisi suscipit ut. Nullam eu felis quis nisl consectetur vehicula vel vitae justo. Praesent ullamcorper pretium posuere. Aliquam in suscipit nisi. Suspendisse potenti. In sed ligula vitae libero gravida molestie eu in nisl. Etiam ornare ultrices dolor, id consequat orci fringilla non. Nam ultrices mauris rutrum, fringilla ligula nec, aliquet turpis. Proin turpis velit, dictum vel vehicula vitae, scelerisque a sapien.</p>
<blockquote>Lorem ipsum dolor sit amet</blockquote>
<blockquote>Nunc scelerisque, risus id tempor viverra, ante nibh pulvinar neque, non volutpat ante tellus facilisis justo. Donec eget auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus lacus eget arcu suscipit vulputate. Sed at aliquet elit, in vestibulum metus. Nulla pharetra nibh quam, a ullamcorper nunc interdum sed. Etiam aliquam purus quis orci tincidunt malesuada. Etiam metus quam, gravida id molestie sit amet, suscipit eget leo.</blockquote>
</div>
Update: What I want in this example:
blockquote 1: red
blockquote 2: default color
blockquote 3: yellow
blockquote 4: red
blockquote 5: yellow
JS-Fiddle
You are looking for :first-of-type/:last-of-type. As the name of the pseudo class implies, this will style the first/last of the element type.
UPDATED EXAMPLE HERE
blockquote:first-of-type {
padding-top: 25px;
}
blockquote:last-of-type {
padding-bottom: 25px;
margin-bottom: 1em;
}
Because they're not the first child or last child, the first child here is the p element.
To target the first blockquote, you may do
:not(blockquote) + blockquote {