I'm trying to make a website with fixed background video. but I want the background video to be inside one div only and above this video I will write something else. I tried this but didn't work :/
HTML Code:
<body>
<div class="header">
<div class="container-fluid">
<div class="row-fluid">
<div class="holder span12 text-center">
<p><span>somthing</span> here</p>
<p id="p1">- this website is designed by bla bla bla -</p>
</div> <!--End holder class-->
</div><!--End row class-->
</div><!--End container class-->
<video id="bgvideo" autoplay loop poster="imgs/main_img.jpg">
<source src="videos/main.mp4" type="video/mp4">
</video><!--End video tag-->
</div> <!--End header-->
<div class="service">
<div class="container-fluid">
<div class="row-fluid text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, impedit, fugit. Nisi laboriosam rem optio unde. Saepe harum iusto, provident atque similique nulla dolore ad, sint esse asperiores enim eligendi.</p>
<p>Laborum magnam dolorem perferendis, ut, aut maxime. Quia dolores, sequi id architecto ea incidunt magni, enim maiores provident suscipit repellat voluptate possimus! Deserunt, quisquam non! Harum a architecto, quas tempora.</p>
<p>Ut nemo eligendi consequuntur reprehenderit cupiditate eveniet eos odit ducimus molestiae vitae, maxime ullam, praesentium dolores labore fuga alias eum hic ipsa similique voluptates repellendus. Aliquam facilis, cum fugiat tempora.</p>
</div><!--End row-->
</div><!--End container-->
</div><!--End service-->
</body><!--End body-->
CSS Code:
.header{
position: fixed;
min-width: 100%;
min-height: 100%;
}
#bgvideo{
min-width: 100%;
min-height: 100%;
position: relative;
top: 0;
left: 0;
}
.holder{
position: absolute;
z-index: 3;
font-size: 250%;
line-height: 1;
margin-top: 300px;
color: #fff;
font-family: lucidahand;
text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
}
.service{
position: absolute;
top: 1000px;
}
Js fiddle of current code.
If you didn't understand me ! this website contain the same idea that I want to make
http://designingmedia.com/html/vizerk/HTML/index-one-video-with-slider-content.html
thanks :D
HTML Code:
<body>
<div class="header">
<video id="bgvideo" autoplay loop poster="imgs/main_img.jpg">
<source src="videos/main.mp4" type="video/mp4">
</video>
</div>
<div class="sitebody">
<div class="firstdiv">
<div class="container-fluid">
<div class="row-fluid">
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
</div><!-- End row-->
</div><!-- End container-->
</div>
<div class="seconddiv">
<div class="container-fluid">
<div class="row-fluid">
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
</div><!-- End row-->
</div><!-- End container-->
<div class="thirddiv">
<div class="container-fluid">
<div class="row-fluid">
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
</div><!-- End row-->
</div><!-- End container-->
</div><!-- End sitebody-->
</body>
CSS Code:
.header{
width: 100%;
position: fixed;
}
#bgvideo{
min-width: 100%;
min-height: 100%;
position: relative;
z-index:-2;
}
.sitebody{/* this class to hold the content so u don't have to set position: absolute for each div or section in your website*/
position: absolute;
width: 100%;
text-align: center;
}
.firstdiv{
margin-top: 900px;
height: 800px;
background-color: #fff;
}
.seconddiv{
/* write whatever u want */
}
.thirdddiv{
/* write whatever u want */
}
Okey, I tried this and worked 4 me , the idea is !! I made fixed header and it's all the time behind your content. so u must set background for each div comes next in your website because if you didn't set a background the video will be shown as background and it's not nice, trust me ☺ ☺
If any one know a better answer please write it down , and if any one can take my answer and make it easier for others I have no problem at all. have a nice day ;)
I see that you are using Bootstrap, which sometimes can be a d*ck;-) In som situations it's easier to
construct your own div and css. That said, try wrapping your video into it's own container and place it above the text you want to display on top of the video. You then have to set the positions to relative in your css, and then you can place your content on top of your video with the margin set to -xxx px. You will haver to play around a bit to get it centered and apply your won desired responsiveness.
here is how I did it:
(note: when you resize the window the text doesn't stay centered, you have to set your own responsive settings, or maybe when you wrap it in a bootstrap container it will do it for you, although in my experience bootstrap doesn't help you that much when centering containers in containers.
Html:
<body>
<div id="wrapper">
<div id="bottom-layer">
<video id="video" preload="auto" src="video/1.mp4"></video>
</div>
<div id="top-layer">
<p>Your Text Here <br />
Hover me!
</p>
</div>
</div>
</body>
CSS:
#bottom-layer {
margin: auto;
max-width: 100%;
max-height: 100%;
background: gray;
position: relative; /* this */
}
#video {
margin-bottom: -4px;
}
#top-layer {
max-width: 100%;
max-height: inherit;
position: relative; /* and this allows you to put the div on top of the video */
margin-top: -640px;
/*Hover Off*/
-o-transition:1.0s;
-ms-transition:1.0s;
-moz-transition:1.0s;
-webkit-transition:1.0s;
transition:1.0s;
}
#top-layer:hover {
/*Hover On*/
background-color: rgba(255,255,255,0.6);
-o-transition:1.0s;
-ms-transition:1.0s;
-moz-transition:1.0s;
-webkit-transition:1.0s;
transition:1.0s;
}
#top-layer p{
text-align: center;
margin: auto;
padding: 320px;
}
img,video,canvas {
width: 100%; /* responsive images,video and canvas elements
}
try this and play around with your own desired settings:)
Good luck!
Related
I'm using marp/marpit to create slides. My goal is to create slide with three vertical columns. I have one CSS file which I use on HTML page and also in marp. In web browser the HTML page it is widen to whole page. But in PDF viewer (file generated by marp) slide has some borders from left/right top/bottom.
Files that I'm using:
page.html
<!DOCTYPE html>
<html>
<!-- page.html -->
<head>
<!-- <link rel="stylesheet" href="css.css"> -->
<link rel="stylesheet" href="custom-theme.css">
</head>
<body>
<div class="container">
<!-- <div class="toppane">Test Page</div> -->
<div class="leftpane">
<h1>Left column</h1>
</div>
<div class="middlepane">
<h1>Middle column</h1>
</div>
<div class="rightpane">
<h1>Right column</h1>
</div>
</div>
</body>
</html>
custom-theme.css
/* custom-theme.css */
/* #theme custom-theme */
#import 'default';
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 34%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
/* .toppane {
width: 100%;
height: 100px;
border-collapse: collapse;
background-color: #4da6ff;
} */
---
marp: true
theme: custom-theme
---
**slide.md**
<!-- slide.md -->
<div class="container">
<!-- <div class="toppane">Test Page</div> -->
<div class="leftpane">
<h1>Left column</h1>
</div>
<div class="middlepane">
<h1>Middle column</h1>
</div>
<div class="rightpane">
<h1>Right column</h1>
</div>
</div>
<!-- https://stackoverflow.com/questions/36662712/how-do-i-divide-a-page-in-three-vertical-sections/36662828 -->
Code that I'm using to generate PDF:
marp --html --bespoke.progress --allow-local-files --theme-set custom-theme.css --pdf -- slide.md -o slide.pdf
CSS used in HTML and displayed in browser
PDF file generated by marp
How can I stretch columns to full slide size in PDF?
PS: why font has different size & color?
Thanks
Use this solution instead: https://github.com/orgs/marp-team/discussions/192
---
marp: true
style: #import url('https://unpkg.com/tailwindcss#^2/dist/utilities.min.css');
---
# Multi columns in Marp slide
<div class="grid grid-cols-2 gap-4">
<div>
## Column 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.
</div>
<div>
## Column 2
Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.
</div>
</div>
You should be able to change grid-cols-2 to grid-cols-3.
"I am reducing width of screen but text of paragraph overrides the image, what changes should I do to prevent overriding text "
"This is for a part website building , I tried to play with some css3 properties here in code but couldnt resolve problem "
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 600px;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
Change width: 600px to width: 100% on yor image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
height: 430px;
background: #fff;
}
#facilities .facility-img {
width: 40%;
float: left;
}
#facilities .facility-img img{
width: 100%;
border-radius: 50%;
padding: 30px 70px;
}
#facilities .facility-info{
float: right;
width: 50%;
text-align: center;
padding-top: 60px;
}
#facilities .facility-info h1{
color: #333;
}
#facilities .facility-info p{
color: #333;
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error.
</p>
</div>
</div>
</section>
</body>
</html>
You need to set your image width to 100% so that it stretches or shrinks according to its parent width (the div). The div parent is set to 40% of its parent container, which is the window.
That being said, your padding is still in "px" and so not proportional to your window. When you shrink your window a lot, you will end up with lots of padding compared to the window size. Think about changing those values too.
Imagine the following code...
<div style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</div>
Or this...
<li style="border: 1px solid #000;"><img src="/images/me.png" style="float: right;"><!--100X250px--> How are you?</li>
If these containers contained text only, you would see a very slender black box (perhaps 25-50 pixels tall) containing text. In fact, that's exactly what I see - except for the images, which extend above or below the container.
I know how to regulate image width, but how do I handle height? I guess there are two choices: 1) Make each image adapt to its container, or 2) make the container height adjust to the image. I think the second option sounds better. Also, I should point out that the amount of text each container contains is all over the map; some could contain a couple paragraphs.
EDIT:
Sorry, I left out an important piece of information. Most of these images are FLOATED to the right or left of the text. Therefore, I don't want the images to span the width of the container. I'd prefer to somehow make the container higher, so the image doesn't protrude.
Anyway, does anyone have any tips for dealing with this problem?
Would this be a start?
.container {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #ccc;
vertical-align: top;
height: 140px;
}
.cell.image {
width: 140px;
height: auto;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.cell.image img {
max-width: 100%;
width: auto;
height: 100%;
}
<div class="container">
<div class="row">
<div class="cell image" style="background-image: url('http://lorempixel.com/450/300/nature')">
</div>
<div class="cell text">
Some text
</div>
</div>
<div class="row">
<div class="cell text">
Some text
</div>
<div class="cell image" style="background-image: url('http://lorempixel.com/300/450/nature')">
</div>
</div>
</div>
You have to assign a width:100% rule to the image, in order to tell it to stretch 100% (not more) of the parent container.
If you infact try to remove that rule, you'll see the image exceeds the container size.
Here you can see an example:
div{
border:1px solid #000;
}
img{
width:100%;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ex, voluptate rerum optio omnis dolorum, deleniti nemo, similique totam voluptatibus quae? Provident assumenda accusamus aliquid laudantium voluptate aperiam dolore! Deserunt!<img src="http://lorempixel.com/550/350/animals" alt=""></div>
EDIT:
If images are floated I suggest you to use two divs, one for text , one for images.
Here is an example:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 1px solid #000;
}
img{
width:100%;
}
.lfloat {
width: 800px;
margin: 0 auto;
}
.text,
.image {
position: relative;
float: left;
width: 50%;
}
<div class="lfloat">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quam, cupiditate, soluta expedita error et adipisci placeat ullam! Eveniet mollitia excepturi eum nesciunt ipsam nihil illo modi voluptas non voluptate.
</p>
</div>
<div class="image"><img src="http://lorempixel.com/300/200/animals" alt=""></div>
</div>
I am trying to accomplish
IMG + text in one row, like in this example
I would like the image to be responsive somehow... so when I resize the window, the image remains there, but also text with background...
Also, I need the text to be vertically aligned... any ideas?
Any help is greatly appreciated! thanks
This may help you, later you can control with media-queries and place your image or content wherever you want.
.img-text {
width: 100%;
display: table;
table-layout: fixed;
}
.photo,
.content {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 40%;
}
.photo img {
max-width: 100%;
height: auto;
}
.content {
width: 60%;
padding: 15px;
}
<div class="img-txt">
<div class="photo">
<img src="http://lorempixel.com/image_output/people-q-c-640-480-6.jpg" alt="">
</div>
<div class="content">
<h1>Something</h1>
<p>Something more</p>
<p>You should have tried yourself first, then asked with your code as example</p>
</div>
</div>
It would be really good if you had posted some of your code. I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>
Working Snippet
.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {}
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">The Text</div>
</div>
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div>
</div>
.imgBox, .textBox{
float: left;
box-sizing: border-box;
}
.textBox{
height: 70px;
width: 100px;
background-color: grey;
color: white;
text-align: center;
padding-top: 25px;
}
<div>
<div class="imgBox">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" width="100" height="70"/>
</div>
<div class="textBox">
your text
</div>
</div>
I need help with the following code. I am SUPER NEW and just learned html and css. Well lets say I am still learning. I want this icon displayed and right next to it the text. The problem is that the ico) is not properly aligned to the text. As you can see (picture) the text is not properly aligned. I hope someone can help me. Thank you in advance.
issue - german web page
<html>
<title>
Was wir anbieten
</title>
<body>
<style>
img{
position: relative; top: 25px;}
</style>
<p>
<h2>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/> Ihre gewünschte Werbekampagne
</h2>
</p>
<p>
<h2>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACR0lEQVR4nO3aP2sTcRzH8aOhRDqIo4h/QBEnwcnBR+BSELQo6KwPQR+AqJsUHHRToSilurj4BBzcBC0q0oqLS2m1FRVEfTkkxSOkzf353V3S/N6QLb9PPt937i7J75IkkUgkEolEIinQxiU8wRLWuo8lLOAi2sOaXwqcw0eDWcbZYcsvDFqYzVCsl9toNZ0fQsCdAuU2mW06v+zwZ0qUg7+Ybiq/7PC7ZDsnB7Gsz4Wr6vwQAi4EKLfJTN35IQQ8Dlhwru78EAI+BCz4ru78EAK+BSy4UXd+FBBAwPuABd/WnR9CwFzAgg/rzg8hYOw/BieFOUzf6POdver8UBLG96twquSNEgWvN50fQsB4/xxOFR3PDZGekm2dq/cDLOJn97GI+ziv/JZYZflFCh3U2YtbyfDONM2Kzl7ikZIz78WjBAew2uREBVnF/gKDT+AKvkCiY3NUmc85/HG8SAck2Gikehi+Zhx8Cjfxqzcgqb1yYDIMP4PPW66vr2o1bDP4ITwbuL7yhhXTZ/AWruJ7pvWVtquBnuFP4lWu9XleoAmy9MNu3MOfPMPvCAE4rXNTtRA7QUApooAoIAqIAqKAKCAKiAJGVkD3OVO4hd/BBQw7PbJO4GWu9dXUqo8+R8wELmM90/pK29XANqfOPswPXF99xWrJcA2Zxqct18t4qAwpWTdF9+CuPvsFCZ7W3TogC1kEpEScwut0QIJjOv/UHjXWcDSPgK6ESVzDD7qnkP+3xkbhHsG6MLfGDuN5mYxIJBKJRCKjzT8YxRMTHEdMlgAAAABJRU5ErkJggg=="/> Professionelle Bild- und Videoaufnahemen + Bearbeitung
</h2>
</p>
</body>
</html>
You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>
Solution
Do not add any other tags inside <p> tag. Not a good idea.
Use semantic markup, please!
Working Snippet
.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {}
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">The Text</div>
</div>
<div class="parent">
<div class="fixed">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div>
<div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div>
</div>
Set your image as "inline-block"
img{display:inline-block}
Anyway, i suggest you to use "ul" "li" to do it http://www.w3schools.com/tags/tag_ul.asp