Is there a precise way to get the top and left sides of the paragraph flowing around the floated img to align. When I zoom in and use developer tools they are not perfectly aligned but very close.
http://codepen.io/BennyHH/pen/mPBEvG
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background-color: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 15px;
}
<section class="contain">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</section>
It can work like that.
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background-color: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 15px;
width: calc(100% - 215px);
margin-left: 215px;
}
<section class="contain">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</section>
just put overflow:hidden on <p> tag
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 13px 15px;
overflow: hidden;
/* text-align: justify; */
}
<section class="contain">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</section>
Related
.I want the breakpoint at 800px to place all three review divs side by side with 20px of padding around them but for whatever reason, it's not working. Can someone tell me where I went wrong? Currently, Reviewer 1 and 2 are stacked on top of each other to the left side of the container, while Review 3 is all by it's lonesome on the right. How do I change this?
Code snippet below:
HTML:
<div class="wrapper">
<div class="card-1">
<h3>Reviewer 1</h3>
<p class="border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
<div class="card-2">
<h3>Reviewer 2</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
<div class="card-3">
<h3>Reviewer 3</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
CSS:
.cards {
display: flex;
flex-direction: column;
align-items: center;
}
#media screen and (min-width: 800px) {
.cards {
display: flex;
flex-direction: row;
padding: 10px;
border: 1px black solid;
}
.border {
width: 75%;
padding: 10px;
margin: auto;
}
}
So I figured it out ironically enough. I just changed the .wrapper div as follows:
.wrapper {
display: flex;
flex-direction: row;
}
I have 3 divs inside a div. When I float them left, they line up side by side. I want to position them for example 500px from top using nth-child in CSS, but then they position themselves on top of each-other. How can solve this problem?
.wrapper{
content:"";
display:block;
clear:both;
}
.sevice p{
margin: 10px 0;
text-align: center;
}
.service{
float: left;
background-color: rgba(255,255,255,0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1){
top: 500px;
}
.service:nth-child(2){
top: 500px;
}
.service:nth-child(3){
top: 500px;
}
<div class="wrapper">
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>
I think I understand what you are saying. You would like them to be positioned side by side, each with the same top value. Floating will position them side by side automatically (if there is room), but if you want to do that with absolute positioning, you need to set both the top and the left values of each element. If you don't set the left value, your elements will all be set all the way to the left. I've revised the snippet below to give an example (and clean up a couple of things).
The general rule is that when you use absolute positioning, you have to specify the x,y coordinates of one of the corners of the element, relative to the analogous corner of its container. To do that, you can use either top or bottom, along with either right or left. So, top and left will position the top left corner of your element relative to the top left corner of the container, bottom and left will do the same with the two bottom left corners, and so on.
If you don't specify, then the values will all be zero, and your element will be in the top left corner of your container. In your case, you didn't specify left or right, so all three elements were positioned at left: 0. In other words, they were all on top of each other as you observed.
/* Don't need any of this
.wrapper{
content:"";
display:block;
clear:both;
}
*/
.service p { /* You had ".sevice p," which is why you didn't get centering */
/* margin: 10px 0;
Don't really need margin with absolute positioning, just change top/left
values to make adjustments to position */
text-align: center;
}
.service {
/* float: left; don't need this any more */
top: 500px; /* put this here if it's the same for all of them */
background-color: rgba(255, 255, 255, 0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1) {
left: 0px;
/* here */
}
.service:nth-child(2) {
left: 27%;
/* here */
}
.service:nth-child(3) {
left: 54%;
/* and here */
}
<div class="wrapper">
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
<div class="service">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>
I need to do the same of the snnipet, but without height in .footer
.footer {
background: blue;
width: 1200px;
height: 250px; //I NEED TO CHANGE THIS
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
}
.footer .container .col-25 {
width: 25%;
float: left;
box-sizing: border-box;
height: 100%;
padding: 0 30px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
bottom: 10px;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
Here is the code. Even you don't need to set height. Or you can change too. Or You can extend paragraph/content
.footer {
background: blue;
width: 1200px;
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
}
.footer .container .col-25 {
width: 25%;
box-sizing: border-box;
padding: 0 30px;
padding-bottom: 50px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
top: 100%;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
I'm struggling with styling a simple ordered list to look this:
The HTML must be standard html like:
<ol>
<li>asdf asdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdf</li>
<li>asdf...</li>
</ol>
I've tried a bunch of different ways with list-style-position: inside, text-indent, etc... but I can't seem to make it perfect. I need to have the number inside the background color and the text lined up correctly when wrapping. And also would like some space between the number and the text. Is it even possible?
This should do it, the idea is displaying the counter as absolute positioned pseudo content.
JsFiddle Example
ol {
list-style: none;
padding: 0;
margin: 0;
}
ol li {
counter-increment: step-counter;
background: lightgreen;
padding: 20px 20px 20px 50px;
margin-bottom: 8px;
position: relative;
}
ol li:before {
content: counter(step-counter) ".";
position: absolute;
left: 20px;
}
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
You have to style it like this:
Css:
ol{
list-style-position: inside;
padding:0;
margin:0;
}
li{
margin:0 0 5px;
border:2px solid white;
background:yellow;
padding:20px;
width:500px;
height:30px;
}
html:
<ol>
<li>asdf asdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdf</li>
<li>asdf...</li>
</ol>
http://jsfiddle.net/u4rqyo4L/3/
I know it's easy enough to wrap text around images by floating the image right or left & then putting your text after it, but what I am wanting to do is wrap other elements around it as well, such as div's.
I tried to set my div to inline & this worked fine, however once I added other divs inside that div it still looked fine, but when looking at it in Firebug the little blue line that shows the element you are hovering over in the code extended over the image as well & when I attempted to add padding to the container div it didn't work & you could see that was because the padding was added right at the end.
I ended up getting it to look ok but adding padding to the image, however it still doesn't seem the right way to go about it seeing as Firebug doesn't like it & I am worried about compatibility issues.
Here is an image of what I am trying to do.. the gray area is where I want the text/elements to wrap & the brown is the image.
Here is some example code: (This example is the not wrapping version)
<div class="main">
<img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" />
<div class="details">
<div class="about">
<div class="title">
About:
</div>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<!-- Info Ends -->
</div>
<!-- About Ends -->
</div>
<!-- Details Ends -->
<div class="contentClear"></div>
</div>
<!-- Main Ends -->
Example CSS:
#content .wrapper .left .main {
padding-top: 20px;
width: 550px;
}
#content .wrapper .left .main .screenshot {
float: right;
border: 1px solid #c0c0c0;
width: 275px;
}
#content .wrapper .left .main .details {
width: 263px;
padding-right: 10px;
}
#content .wrapper .left .main .details .title {
color: #0F5688;
font-size: 1.8em;
font-family: arial;
font-weight: bold;
}
#content .wrapper .left .main .details .info {
margin-top: 6px;
font-size: 1.3em;
font-family: Arial;
color: #636363;
line-height: 1.6;
}
Here is an image showing the issue FireBug has with it (from the JSFiddle example), as I say it looks fine on the browser, but seeing as the firebug bar extends all the way over the image I was worried that may cause problems..
Yes, the correct way to move something to one side and have stuff wrap around it is to float the element.
In the example below (simplified from your code), adding padding to the floated image works just fine.
CSS:
.main .screenshot {
float: right;
border: 1px solid #c0c0c0;
padding: 5px;
}
.main .title{
font-size: 140%;
}
HTML:
<div class="main">
<img src="img/png" width="150" height="117" class="screenshot" alt="Example" />
<div class="details">
<div class="about">
<div class="title">About:</div>
<div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
Demo jsFiddle