I am doing the mini-project by using only HTML and CSS, the problem is when I will be in max-size of the window the webpage design will be proper, but when I will minimize the window screen the huge white space will appear on the right side. Even I am using width=100vh and height=100vw.
Are you using 100vw really everywhere? One larger element can cause it:
<body>
<div style="width: 150vw; background-color: yellow; height: 50px;"></div>
<p style="background-color: blue;">This element has the normal window width. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
Or it can cause padding if you havent setted box-sizing: border-box;
<body>
<div style="width: 100vw; background-color: yellow; height: 50px; padding-right: 150px"></div>
<p style="background-color: blue;">This element has the normal window width. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
Otherwise we need to know more details as said Nour-Allah Hussein, ideally code snippet.
Related
This question already has answers here:
What are the CSS properties that get elements out of the normal flow?
(1 answer)
Position Relative vs Absolute?
(10 answers)
Closed 1 year ago.
I was playing around with position absolute relative and sticky
and I can't seem to understand why the parent div "back" (blue) isn't completely wrapping around "content" (yellow) div? instead it's only wrapping around "wallpaper"
also is there any solution to fix this?
#header {
width: 100%;
height: 100px;
font-family: "Sans-serif", Verdana;
background-color: black;
color: white;
font-size: 25px;
}
#back {
height: 100%;
background-color: blue;
position:relative;
}
#content {
background-color: yellow;
width: 50%;
margin: auto;
position: absolute;
z-index:1;
}
#wallpaper {
background-image: url("https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg");
height: 100px;
position: sticky;
top:0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header">home</div>
<div id="back">
<div id="content">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 exeat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 exequa. Ut enim ad minim veniam, quis nostrud exercitation uls aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="wallpaper"></div>
</div>
</body>
</html>
EDIT
I realize that the absolute div is being taken out of flow,
I should have been more clear and ask whether there is any way to keep the div in the doc flow while having the effect of position:absolute or is there an altogether different way of placing the "wallpaper" as a sticky below the header (without knowing the height of header)?
I have a div with position: sticky inside another div and I want it to stick to the right bottom of the screen, as long as the parent div is on-screen. However, right: 0 is without any effect when I write this into the CSS. left: 100% works, but brings obvious problems with it when the screen is too small as it will then be positioned relative to the screen and scrolling beyond (to the right) will leave the sticky div behind. Instead I would like the div to stay on the bottom right corner of the screen, until the div is scrolled beyond the screen.
Here is my CSS & HTML:
div.text {
width: 100%;
}
div.data {
min-width: 1000px;
}
div.sticky {
position: sticky;
width: 50px;
height: 50px;
bottom: 0;
left: 90%;
background-color: red;
padding: 50px;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<body>
<div class="text">
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
</div>
<div class="sticky">Sticky</div>
<br><br>
</div>
</body>
</html>
Update your code like below:
div.text {
min-width: 100%; /* added */
display:inline-block; /* added */
}
div.data {
min-width: 1000px;
}
div.sticky {
position: sticky;
width: 50px;
height: 50px;
bottom: 0;
right:0; /* added */
margin-left:auto; /* push the element to the right */
background-color: red;
padding: 50px;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<body>
<div class="text">
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
</div>
<div class="sticky">Sticky</div>
<br><br>
</div>
</body>
</html>
Is this what your want..
div.text {
width: 100%;
}
div.data {
min-width: 1000px;
}
div.sticky {
position: fixed;
width: 50px;
height: 50px;
bottom: 10px;
right: 10px;
background-color: red;
padding: 50px;
font-size: 20px;
}
<div class="text">
<div class="data">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
</div>
<div class="sticky">Sticky</div>
<br><br>
</div>
Is there a CSS only trick to make this happen:
An element is placed in position absolute x,y on the screen. The document has a vertical scroll depending on its content. Can the height be controlled based on the available visible viewport area?
Exampe 1:
Exampe 2:
HTML:
<div id="dialog">
Change my height with no JS :)
</div>
<div id="content">
... content
</div>
JS Fiddle: https://jsfiddle.net/8dj4xz2q/
yes it is you can do this using VH property and also using css calc to calculate right height.
check out the snippet.
#content{
font-size:100px;
color:#CCC;
}
#dialog {
position:absolute;
top:100px;
left:100px;
border: solid 1px red;
height:calc(100vh - 130px);
overflow-y:scroll;
width:200px
}
<div id="dialog">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="content">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I am new here. I have a slight problem with this area. I have a background image with a picture at the bottom right and in my PSD, I want to make the text look like this: Original
but currently in my code, it looks like this:Current
As you can see, the text actually flows beneath the div without automatically breaking line. Appreciate if there's any solution to this, thanks in advance!
I have two separate images. One is for the background image (Full cyan background) and another one is the ipad image which is positioned absolute and also positioned to the bottom right of the background image.
HTML:
<section id="ipadsection">
<div class="container fluid bgimage">
<div class="blockoftext">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="ipadimg">
<img src="assets/img/ipad.jpg" alt="ipad">
</div>
</div>
</div>
</section>
CSS:
.bgimage {
background: url('../img/backgroundipad_03.jpg');
height: 400px;
background-size: cover;
position: relative;
}
.blockoftext {
float: left;
text-align: left;
}
.ipadimg {
position: absolute;
bottom: 0px;
right: 0px;
float: right;
margin-bottom: 1px;
width:50%;
}
The main problem with your existing code is the position: absolute you used and that the image element weren't placed correct in the markup.
As the <div class="ipadimg"> div (and its CSS rule) isn't necessary I removed that, moved the img before the last paragraph and added this new rule.
.blockoftext img {
float: right;
}
Stack snippet
.blockoftext {
float: left;
text-align: left;
}
.blockoftext img {
float: right;
}
<div class="blockoftext">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<img src="http://www.placehold.it/300x150" alt="ipad">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Update based on comment
Here is the text splitted into to 2 groups. The down side is that the user, which can edit the text, need to know it has to be splitted so a part of the text will wrap around the image.
Side notes:
I personally would solve this issue by making a text template and then measured the newly edited text and then injected the floated image into it. (can't make a sample how-to though, as I'm not using WordPress)
If users are allowed to edit the text, it might be appropriate to let them change image as well. Their text might say something that is not accurate with the existing one
.blockoftext, .blockoftext-withimg {
float: left;
text-align: left;
}
.img-right {
float: right;
}
<div class="blockoftext">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="blockoftext-withimg">
<img class="img-right" src="http://www.placehold.it/300x150" alt="ipad">
<span class="txt-left">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
The float property in CSS is all you need to create text that 'wraps around' your image. This creates an image that is positioned within the text-flow of your document, but 'floated' to the left, or to the right.
"Floating" is ignored if you used a specific type of element positioning, like position: absolute. When you use absolute positioning, the picture is actually taken out of the document flow, and placed on a 'layer' of its own - and this is why it's showing on top of your text. In order to get your layout to work, you may need to do the following:
remove the absolute positioning from the picture
do not float the text - place the text as normal inline content.
place the picture within the text, and float it to the right.
You can find out more about floating pictures here:
http://www.w3schools.com/css/css_float.asp
I want my page to look like this without resizing (disclaimer: own page), however, I would like that on resizing (or mobile), the "Introduction" would fall down under "Index" and look just like "History" looks, for example.
If possible, I would even like that, within the code, there's the index div and then the first box (in this case "Introduction", but in case of missing, "Required knowledge" would behave in the same way as now Introduction). This would make the PHP code behind much simpler. Also, 'Introduction' should flow naturally through the page as shown in the link above, wrapping around Index and filling 100% of the page under it.
This is what I've got so far, but I just cannot make it behave right. Without resizing it looks good, but the "Introduction" h2 would fall first due to it's % and fixed padding (horizontally 20px in total) while the text remains in place, getting in the middle of the text. I would like that, if the h2 falls down, the text follows in pure HTML and CSS.
Is this even possible? I'm trying my best but I cannot get it to behave as I'd like. This is the relevant code of 'test/ck' (when it works I'll put it in a separate stylesheet):
<div style="width: 25%; float: left; min-width: 150px; margin-right: 2%;">
<h2>
Index
</h2>
<div id="index" style="width: 100%">
<ul>
<li>Announcements</li>
<li>Description</li>
<li>Subjects</li>
<li>Competency</li>
<li>Schedule</li>
<li>Evaluation</li>
</ul>
</div>
</div>
<div id='box' style="">
<h2 style="width: 70%; float: right;">
<?php echo $_('Introduction'); ?>
</h2>
<p>
Lorem ipsum dolor sit amet, consecte22tur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<span style="clear: left; display: block;"></span>
<br><br>
<h2 id="announcements">Announcements</h2>
<p>
Lorem ipsum dolor sit amet, consecte22tur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br><br>
I think you are looking for css media queries
http://www.w3.org/TR/css3-mediaqueries/
http://css-tricks.com/css-media-queries/
You can implement page width 'breaks' in your css like this:
#media all and (max-width: 600px) {
#index { width: 100% }
body { background: red}
}
Anything in the curly braces of the media query will be used if the page width is less than 600px.
Media queries are here to stay, and they degrade "gracefully" for those with sad old browsers.
Take a look at the example I have set up here:
http://jsfiddle.net/AqbSY/4/
resize the browser and see how this works.
You don't need to set the float or size on the #box elements.