How to wrap a div containing text around another div? - html

I am looking for a way to wrap text filled div around another div.
It seems that I may have missed a vital detail. The text needs to wrap round an embedded YouTube Video. This seems to not work with all the answers you have provided, I have tried all of the given examples and once I embed the video, the text disappears.

You can use float: left, then .content will wrap it if it's next in DOM
.wrapper {
border: 1px solid blue;
}
.left {
float: left;
width: 100px;
height: 100px;
background: red;
margin: 0 10px 10px 0;
}
<div class="wrapper">
<div class="left"></div>
<div class="content">
The English word world comes from the Old English weorold (-uld), weorld, worold (-uld, -eld), a compound of wer "man" and eld "age," which thus means roughly "Age of Man."[3] The Old English is a reflex of the Common Germanic *wira-alđiz, also reflected in Old Saxon werold, Old High German weralt, Old Frisian warld and Old Norse verǫld (whence the Icelandic veröld).[4]
The corresponding word in Latin is mundus, literally "clean, elegant", itself a loan translation of Greek cosmos "orderly arrangement." While the Germanic word thus reflects a mythological notion of a "domain of Man" (compare Midgard), presumably as opposed to the divine sphere on the one hand and the chthonic sphere of the underworld on the other, the Greco-Latin term expresses a notion of creation as an act of establishing order out of chaos.
'World' distinguishes the entire planet or population from any particular country or region: world affairs pertain not just to one place but to the whole world, and world history is a field of history that examines events from a global (rather than a national or a regional) perspective. Earth, on the other hand, refers to the planet as a physical entity, and distinguishes it from other planets and physical objects.
'World' distinguishes the entire planet or population from any particular country or region: world affairs pertain not just to one place but to the whole world, and world history is a field of history that examines events from a global (rather than a national or a regional) perspective. Earth, on the other hand, refers to the planet as a physical entity, and distinguishes it from other planets and physical objects.
</div>
</div>

Wrap both divs in a 'container' div and give 'div1' use float for the style. This will give you the desired result. See the code below.
<div class="container">
<div class="div1" style="float:left; width: 150px; height: 150px; margin: 10px; background-color: #ff0000;"></div>
<div class="div2">Wrapping text comes here.</div>
</div>

You could place div 1 inside of div 2.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Div Test</title>
<style>
.outer {
width:800px;
height:600px;
background-color:#22e;
}
.inner {
width:300px;
height:200px;
background-color:#e22;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>

You can try something like this. div inside a div with margin and float properties.
https://jsfiddle.net/rnxuLb9u/

Related

how How do I align right the text inside <p> while maintaining the correct paragraph mode?

Texts are displayed word-for-word in both and sections after specifying margins.I want the contents of the first and tags to be on the left and the contents of the second and tags to be on the right.I want to solve this operation according to properties such as margin left, margin right and inline styling.I am currently training at this level and I have to practice with this tool
<!doctype html>
<html lang="en";>
<head>
<title>solarise_mk</title>
</head>
<body style="background-color:rgb(233, 150, 122);">
<br>
<br>
<br>
<!--Several nested tags to create a key to link to another site-->
<!--start coding for the key -->
<a href="https://www.herzing.edu/description/computer-programmer ">
<h1 style="text-align:center;">
<mark style="background-color:rgb(64,224,208);
color:rgb(233, 150, 122);
padding:30px;
border-radius:35px;
font-family:Times New Roman";>
solarise-mk
</mark>
</h1>
</a>
<!--end coding for yhe key-->
<br>
<br>
<br>
<br>
<br>
<!--The following code is for inserting a photo from another site-->
<center>
<img src="https://www.herzing.edu/sites/default/files/styles/fp_960_640/public/2020-09/it_computer_programming.jpg.webp?itok=8aEwtSxk" alt="What Does a Computer Programmer Do?" style="width:1000px;height:700px;">
</center>
<!--ending coding for photo-->
<br>
<br>
<br>
<br>
<br>
<!--start first Start the first header and paragraph-->
<h3 style="color:rgb(139,0,139);font-family:Times New Roman;margin-left: 10%;margin-right: 90%;">Site goals:</h3>
<p style="color:rgb(255,240,245);font-family:Times New Roman;;margin-left: 10%;margin-right: 90%;">
we want to introduce you
exciting art of computer programming
And what programming is,what capabilities
are needed...
If you find you are interested in this
technique And you have traces of the ability
to accurately observe and then analyze
them correctly,Join us to enter the field of
programming professionally
</p>
<!--end first the firstparagraph-->
<br>
<br>
<br>
<br>
<br>
<!--Start the second header and paragraph-->
<h3 style="color:rgb(119,136,153);font-family:Times New Roman;margin-left: 90%;margin-right: 10%;">As the site owner:</h3>
<p style="color:rgb(230,230,250);font-family:Times New Roman;;margin-left: 90%;margin-right: 10%;">
Ever since I got to know myself, I have noticed
I prefer to have a private and safe environment
to think about analyzing problems and to
discovering creative solutions to solve them.
Usually I look around in detail, Unless I'm
focused on fatigue.I am interested in mathematics,
painting and artwork.Of course, mathematics,
except for arithmetic and mental counting,because
sometimes it is difficult for me to concentrate
and I basically know this as long as there
is a calculator.
People around me tell me that you are smart but
distracted and I believe in this judgment.
Distraction has become a problem for me in
many places,if I did not have the other
capabilities next to it might have been a
problem .
Finally, I love programming and one of
my goals is to specialize in this field e.
</p>
<!--end the second header and paragraph-->
</body>
</html>
Doing all that inside one single paragraph tag is unnecessary and not often done. You should instead divide the content up into 3 sections. One for the left content, one for the center content and the last one for the right content. Do this with <div> tags (or other elements such as <aside> and <main>):
<div class="left_div">Left content</div>
<div class="center_div">Center content</div>
<div class="right_div">Right content</div>
/* css */
.left_div { width: 20%; text-align: left; }
.center_div { width: 60%; text-align: center; }
.right_div { width: 20%; text-align: right; }
This produces 3 sections or divisions, where text-align takes care of aligning the contents of the divs.
You can also use float: left; (or right;) on image elements or button elements to make those elements shift to one side while making the text around it flow around the object that is floated. This is often done with images inside of text.

How to change colour of a box div (HTML)

I am trying to create a website and I am separating my information into boxes. I am trying to change the colour of each individual box but it is not working.
Here is my code. The and is trying to change the colour of the div.
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Blank</title>
***<!--Box-->
<style>.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
</style>***
</head>
<body>
<main>
</main>
<font face="caslon">
<color background: green>
<div class="boxed">
<h1> <font face="caslon", style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
</color>
<color background: red>
<div class="boxed">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</color>
</font>
</body>
</html>
You need to style each div with a background-color
Try adding this style="background-color:YourColorCode;" to your div.
For better understanding on font-face, see this link
See below snippet:
.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
<body>
<main>
</main>
<div class="boxed" style="background-color:green;">
<h1><font style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
<div class="boxed" style="background-color:red">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</body>
You need to give each element an id
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
Your Css will then look like
#box1{
background-color:red;
}
#box2{
background-color:blue;
}
hope it is helpfull to you :)
You are creating custom color tag instead of this use style attribute in div tag.
<div class="boxed" style="background-color:green">
</div>

Float left not applying?

I can't seem to float my image to the left? Can't figure out why?
I've applied a class of align-left which contains float: left.
Live version at - https://www.workbooks.com/salesforce-alternative (see the review grid half way down below the heading 'High customer satisfaction ratings').
Code:
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<h2 style="height: 400px;"></h2>
<p></p>
</section>
CSS:
.align-left {
float: left;
}
.bluesection {
background-color:#ecf0f2;
padding: 50px 100px 50px 100px;
}
Try this code:
<section class="bluesection card__content__headings">
<h2 class="heading--two inline-block__heading" style="margin: 0px 0px 20px; text-align:center;">High customer satisfaction ratings</h2>
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" src="/sites/default/files/2017-03/Reviews-6.png" width="400" height="395">
<p class="inline-block__copy">With our world class software, our CRM expertise and proven implementation best practices, we are a genuine partner you can rely on to accompany you on your CRM journey - helping you transform your business and drive ongoing success.</p>
<p class="inline-block__copy">But don't just take our word for it. Over 268 independent customers have reviewed Workbooks on G2 Crowd where Workbooks consistently scores above Salesforce in satisfaction and richness of functionality.</p>
<p class="inline-block__copy">The G2 Crowd Report compare Workbooks to its competitors based on independent user reviews. Workbooks is rated higher than Salesforce in most categories.</p>
<p style="clear:both;"></p>
</section>
As you can see, I change the img after h2, and I have added a p with clear:both style to the end inside of the section. Also I have added and removed some CSS styles to get a nice look.
It's not float-left but float: left;. That's not the only issue though.
The image is already floating left but the reason it doesn't work the way you want it to work is because of the padding of the blue section.
Keep in mind that the image is floating to the left relative to the element it is enclosed in. If you change the value of padding to padding: 20px 50px 20px 50px; you can see that the image will move further to the left because the padding got smaller than it was initially.
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
Sam
it already floated left, the reason it cant go any further is because it reached the edge of the div. padding shrinks the edges relative to the child elements, but maintains it defined size unless values are bigger.
here is a recommended fix:
HTML
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<div class="text">
<h2></h2>
<p></p>
</div>
</section>
CSS
.bluesection {
position: relative;
width: 100%;
display: flex;
}
.text {
width: 100%;
}
example in jsfiddle: https://jsfiddle.net/qf6w18p1/
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
You can fix the height, but when you see your code in a phone device (360px x 640px), the section title h2 will be located under img, and it will not look nice.
My advice is to change the orden of the h2 and img tags.

Background Image opacity not working [HTML/CSS]

I am trying to set my background image to opaque keeping the content clearly visible. So far what I have tried do not seem to work. Here is my code. Any suggestions would be of great help
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 0.9;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
Here's a hacky way to do it...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 20%;
}
</style>
</head>
<body class="my-container" style="background-image: url('https://jaymartmedia.com/example/kitten.png');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
</html>
Not optimal, but it's quick and easy, all I did was add opacity using an image editor.
Please download the image here.
https://jaymartmedia.com/example/kitten.png
Hope this helps.
You forgot a semi-colon after opacity, as well as it's measured in percentage. Fixed code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 90%;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
Convert to PNG and make the original image 0.2 opacity
because if u give opacity for body...it will effect to all contents inside the body including bg image.
CSS: set background image with opacity?
Opacity applies to entire container and thus resulting the effect in either the background and the content.
A good solution is to use a PNG with your desired level of opacity and apply it to a child container. In your case, you can apply to your .container.
With using this method, you can easily switch the background image anytime you need without worrying about its opacity level:
.container{
background-image: url('transparent.png');
}
The transparent.png image will be place on top of your background image.
Another way to do this:
<head>
<title></title>
<style type="text/css">
.my-container {
z-index: -1;
opacity: 0.2;
position: absolute;
}
</style>
</head>
<body>
<div class="my-container">
<img src='http://placekitten.com/1500/1000'>
</div>
<div class="container">
<article>
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
try use alpha filter in your section or background div, doest work if u link img on div and set opacity on body,
try this
.youclass {
background-image:url(../img/welovecats.jpg);
opacity:0.60;
-moz-opacity: 0.60;
filter: alpha(opacity=0.6);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;}
html
<html>
<body>
for section
<section class="youclass">
content
</section>
</body>
</html>
use body for only main items like data-target, scroll scripts, normalizes and other stuffs

Centering a variable-size block element on a page

I've inherited a very old web page that contains a single paragraph of text centered on the screen, both horizontally and vertically.
Here's the code:
<html>
<body>
<center><table height='100%'>
<tr style="vertical-align:middle"><td>
<pre style="font-size: xx-large">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table></center>
</body>
</html>
It doesn't render properly in jsFiddle, but it does as a standalone page, which you can see here.
I want to bring the markup into the 21st century, while still having the page render basically the same way (in particular, with the text block centered both horizontally and vertically). How can I do this with CSS? A non-table-based solution would be preferable (since the data isn't tabular), but I'll take what I can get.
The new markup I've written for the page looks like this, and has everything except the centering:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>/usr/bin/fortune</title>
<style>
p {
font-size: xx-large;
font-family: monospace;
white-space: pre;
}
/* insert CSS for centering here */
</style>
</head>
<body>
<p>Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).</p>
</body>
</html>
This sounds like a good case for display: table; you want some table styling for non-tabular data:
HTML
<div>
<p>
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information.
Answer available from AT&T on payment of license fee (binary only).
</p>
</div>
CSS
html, body {
height: 100%;
}
div {
display: table;
height: 100%;
margin: 0 auto;
}
p {
display: table-cell;
vertical-align: middle;
}
Only centers the content, and does not support IE6 or 7. For just 1 paragraph of text of unknown size, this will keep it centered: http://jsfiddle.net/hXuee/
You can set the paragraph tag to have position fixed and then use a percentage for the top attribute to center it on the page.
i did this:
position: fixed;
top: 35%;
You can check it out here: http://jsfiddle.net/MYuqe/
One way is to adjust it. Here's a way I did that got it pretty much dead center:
<html>
<body>
<table height='100%' width='100%'>
<tr style="vertical-align:middle; text-align: center;"><td style="position: relative; top: -6%">
<pre style="font-size: xx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>
Edit, to center the block and not the text, I used this:
<html>
<body>
<table height='100%' style="margin-left: auto; margin-right: auto;">
<tr style="vertical-align:middle;"><td style="position: relative; top: -6%;">
<pre style="font-size: xxx-large; ">
Q: How many Bell Labs Vice Presidents does it take to change a light bulb?
A: That's proprietary information. Answer available from AT&T on payment
of license fee (binary only).
</pre>
</td></tr></table>
</body>
</html>