How float image and text correctly using css - css-float

I want a format html using CSS so that I get the following:
Image on the left, with subject and
body next to it on the right. I want
subject to be on one line and the body
to be on the other.
With One message after each other
on subsequesnt blocks downs the page.
However I'm getting the subject and the body one one line and a cacade effect down the
page.
Here is what I seem to be getting.
I just cannot seem to get the hang of what's needed.
My html is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
</head><body>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
<div class'message'>
<span class='to'>
<img class='floatimgleft' src='../code/images/arrow-right.png' width='64' height='64' border='0' />
<span class='subject'>subject</span>
<span class='body'>body</span>
</span>
</div>
</body></html>
My CSS is:
.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}
.message{
display: block;
}
.subject {
display: inline;
}
.body {
display: inline;
}
Edit: I've edited the code to show where I started from. I was under the impression that div class='message' would cause a line break between messages but I'm getting a cascade effect.


Add:
class="floatimgleft"
to your img tags:
<img src='../code/images/arrow-right.png' width='64' height='64' border='0' class="floatimgleft" />
Also, seems you are not using to class either and you are missing = in the <div class'message'>.
Here's a jsfiddle to test it out:
http://jsfiddle.net/CdBSU/
EDIT: For having it clear, add clear: left to message. See the fiddle:
http://jsfiddle.net/CdBSU/2/
for a demonstration.


For the layout you were looking for, I would probably go with something more like:
Index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>messages to/from someone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul id="messages">
<li>
<div>
<span class="icon"></span>
<h2>Subject</h2>
<p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</li>
<li>
<div>
<span class="icon"></span>
<h2>Subject</h2>
<p>Body.. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</li>
</ul>
</body>
</html>
Style.css:
h2, p { clear: none; padding: 0px; margin: 0px; }
ul#messages { text-align: left; }
ul#messages li { margin-bottom: 25px; }
ul#messages li > div > span.icon { float: left; display: block; width: 64px; height: 64px; border: 1px solid #111; /* border added to demonstrate */ background-image: url('../code/images/arrow-right.png'); }
Demonstrated at: http://jsfiddle.net/j7KHg/2/

Related

hero image background in wordpress not keeping it's children inside it

I am trying to make a hero image on my wordpress site (genesis theme). I do not want to use a plugin, I want to make it from scratch. I am trying to have the title of the page and a quick blurb contained in the hero image section at all times (like below)
IMG 1
My current set up works fine at full screen, but when the screen is smaller, the blurb moves out of the hero image and the hero image gets smaller and blocked by the navbar (see below)
I want the blurb to be in the hero image at all times. When I move the blurb div into the same div as the hero image, the blurb ends up under the footer for some reason.
I have left my code below. Please let me know if you guys would like more info
<div style="width:100%">
<div style="position: absolute; top: 99px; overflow: auto; z-index: -1; width:100vw" aria-live="polite">
<img style="/*height: 100%;*/ max-height:100% ;min-width: 100%; object-fit: cover;" src="https://mywordpress.site.com/wp-content/path-to-img/hero-image-scaled.jpg" alt="" />
</div>
<div class="our-process-header">
<div style="display: flex; align-items: center; justify-content: center; padding-top: 20px;">
<p style="text-align: center;">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
</p>
</div>
<p> </p>
</div>
</div>
The style for our-process-header is below
#media screen and (max-width: 1070px) {
.our-process-header {
width: 100%;
}
}
#media screen and (min-width: 1300px) {
.our-process-header {
width: 50%;
}
}

CSS - indent list on soft line wrap to character position

I have a list like so:
<ol>
<li>2017 — Lorem ipsum blah blah blah blah blah blah blah blah blah.
<li>2018 — Lorem ipsum blah.
</ol>
This currently displays like this:
* 2017 — Lorem ipsum blah blah blah blah
blah blah blah blah blah.
* 2018 - Lorem ipsum blah.
What I’m after is for it to wrap like this:
* 2017 — Lorem ipsum blah blah blah blah
blah blah blah blah blah.
* 2018 - Lorem ipsum blah.
In QuarkXPress you can enter a special hidden character that forces the indenting of all lines of text from that point to the next paragraph return. (In the example above this special hidden character would go before the “L”.) This is what I’m after in CSS — does such a thing exist?

You can use pseudo element and counter to achieve this:
ol {
counter-reset: section 2016;
list-style:none;
}
ol li {
display:flex;
}
li::before {
counter-increment: section;
content: counter(section) " — ";
margin-right:5px;
flex-shrink:0;
}
<ol>
<li>Lorem ipsum blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah.</li>
<li>Lorem ipsum blah.</li>
</ol>

How to center DIVs as the browser window is scaled

jsfiddle: https://jsfiddle.net/hfnmspwa/3/
I have floating DIVs with text in that resize as browser window resized. This is working however I cannot get these text boxes to center in the middle of the page. There is no float center! Please see the jsfiddle for further info - I have put some further notes in the JS quadrant.
.infos_div {
background-color: #FFF;
}
.infos_div::after {
content: "";
clear: both;
display: table;
}
.infos_container_div {
background-color: #9FC;
display: inline-block;
}
.info_div {
display: inline-block;
cursor: pointer;
float: left;
text-align: center;
width: auto;
height: auto;
min-height: 80px;
max-width: 30%;
min-width: 200px;
padding: 10px;
margin: 10px;
z-index: 1;
background-color: #FFF;
white-space: normal;
}
<div class="infos_div">
<div class="infos_container_div">
<div class="info_div">
<strong>Feature 1</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 2</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 3</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 4</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div" o>
<strong>Feature 5</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>SFeature 6</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
</div>
</div>

You could give the parent element center text alignment and remove the float.
So add text-align: center; to .infos_container_div and remove float: left; from .info_div.
https://jsfiddle.net/hfnmspwa/4/

If you take the
float:left;
Off of .info-div they should center.

You can use grids, if you necessarily need the 3 paragraphs to be centered.
* {
margin: 0;
padding: 0;
}
.infos_div {
background-color: #FFF;
}
.infos_div::after {
content: "";
clear: both;
display: table;
}
.infos_container_div {
background-color: #9FC;
display: grid;
grid-template-areas: ". . .";
text-align: center;
grid-gap: 10px;
padding: 10px;
}
.info_div {
display: inline-block;
cursor: pointer;
text-align: center;
width: auto;
height: auto;
padding: 10px;
z-index: 1;
background-color: #FFF;
white-space: normal;
}
<div class="infos_div">
<div class="infos_container_div">
<div class="info_div">
<strong>Feature 1</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 2</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 3</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>Feature 4</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div" o>
<strong>Feature 5</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
<div class="info_div">
<strong>SFeature 6</strong>
<div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
</div>
</div>
</div>

Making a tall, right-pointing triangle be the right side of a div

Part of a mockup I'm working on is the following.
I'm trying to get the triangular right end of the "Delay Your Payments" div to match the mockup, if possible using CSS without using any sliced images and without using using any absolutely valued pixels or anything that will screw up if the dimensions of the container change after more text is added.
Attempt: http://jsfiddle.net/a7L3tytp/
HTML:
<div class="delay-your-payments">
<h3>Delay Your Payments</h3>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
CSS:
div.delay-your-payments { background: #1AA3B4; padding: 20px; position: relative; width: 80%; }
div.delay-your-payments:after { color: #1AA3B4; right: 0; position: absolute; content: "\25B6"; top: 50%; transform: translateY(-50%); right: -11px; }
div.delay-your-payments > h3 { color: #FFF; }
div.delay-your-payments > p { color: #FFF; }

Here's my solution
div.delay-your-payments { float:left;background: #1AA3B4; padding: 20px; height:200px;position: relative; width: 80%; }
div.delay-your-payments > h3 { color: #FFF; }
div.delay-your-payments > p { color: #FFF; }
.arrow-right {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid green;
float:left;
}
*{
box-sizing:border-box;
}
<div class="delay-your-payments">
<h3>Delay Your Payments</h3>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
<div class="arrow-right"></div>

how to position two elements next to each other regardless of page size

I'm trying to do an iphone style swipey thing on my webpage. The idea is that in my sidebar, if I click a link it will side the sidebar to the left to reveal where that link would go to. To do this, I am creating two sidebars side by side, the visible sidebar and the next sidebar that will be hidden behind another element.
An example of the sidebars can be found at http://jsfiddle.net/gpcC6/7/
The problem I'm having, is when the window is resized, the second sidebar goes under the first. I want to to stay to the right, even if it means that it goes off the side of the screen. Is this possible?
Thanks

Put the sidebars in a container that has white-space: nowrap and make them display: inline-block instead of floating them and it should work as per your instructions.
Note that white-space: nowrap in some browsers will interpret the space between two divs in the HTML as an actual space
<div>
</div><!-- SPAAAAAACE -->
<div>
</div>
To remove that spacing you need to place them on the same line
<div>
</div><div>
</div>
Alternatively, you can add a font: 0; to the parent element, in this case the container that will remove the spacing as well, but beware that you need to explicitly define the font size for all elements before you do that, otherwise all the child elements will have a font size of 0 as well. ;)
See this question and this article for more information.
Sample | Code
CSS
div{
font-size: 16px;
}
#topbar {
height: 40px;
background-color: blue;
}
.wrapper{
white-space: nowrap;
font-size: 0;
}
.sidebar {
width: 200px;
display: inline-block;
white-space: normal;
}
.title {
height:30px;
background-color: red;
}
.main {
height: auto;
overflow: scroll;
}
HTML
<div id="topbar">
hello
</div>
<div class='wrapper'>
<div class="sidebar">
<div class="title">
title
</div>
<div class="main">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
</div>
<div class="sidebar">
<div class="title">
title
</div>
<div class="main">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
</div>
</div>

Put a wrapping div around your bars and give it a fixed width or a min-width. Then you must only look that your sidebars fit in this wrapping container next to each other. That guarantees that they stay next to each other even when the window is smaller and you can scroll horizontally.

Resources