I have a project in which I'm parsing some text and reformatting it with divs wrapped around key sections. I'm using divs because I specifically need to outdent the first line of each section, for which I'm using left-padding along with negative text-indent. Everything is working fine, except for one issue: due to the nature of the text and the way I need to parse it, many sections will need to end with a comma which cannot be included in the prior div. So I end up with a comma that floats on its own line. I'd like to find a way to make the comma stay with the prior div instead of appearing on a new line. Note: changing the parsing routine to move the comma inside the prior div will be complex; I'm specifically looking for a way to do this in CSS without moving the comma inside the prior div.
Here's a simplified example of the output of what my parse-to-html routine produces (JSFiddle):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
.inner {
padding-left: 8ch;
text-indent: -6ch;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis leo diam. Donec mattis erat eget augue pellentesque sodales. Aliquam et augue eget libero mollis hendrerit eu a purus. Morbi bibendum, nunc eget lobortis porttitor, tortor velit posuere ex, at tempor eros orci auctor magna. Praesent maximus malesuada sodales. Integer convallis eget orci eget cursus</div>,
<div class="inner">Mauris aliquam luctus sem, non cursus libero cursus non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dignissim nisi eu elit placerat, vel euismod quam elementum. Nam fringilla tristique nibh a mattis. Duis finibus lacus libero, quis efficitur sem egestas vitae. Nunc auctor enim lectus, non finibus est tincidunt ut. Nulla commodo odio ut nisl ullamcorper vehicula.</div>
</div>
</body>
</html>
If you view the rendered output, you'll see that between the two inner divs, there's a comma that appears on its own line. I'd like it at the end of the final line of the previous div. In order to get the outdenting, I need to use div instead of span. Is there any way to make that comma appear at the end of the prior div, without moving it inside the div?
Also: I'm targeting Electron.js, so I don't need an every-browser solution. Something that works in latest Chrome is sufficient.
Edit to add: if it helps, assume I can wrap additional tags around the content, including around the div + comma. It's moving the comma that is expensive (for my value of expensive).
It's not the cleanest solution, but since you can't put the comma in the div you will need to set the div to display as inline (or switch it to a span) so that the comma appears next to the text and handle the line break with wrapping the comma and adding a pseudo element. E.g.:
.container {
padding-left: 8ch;
}
.inner {
display: inline;
margin-left: -6ch;
}
.comma:after {
display: block;
content: " ";
}
See this update to your JS Fiddle for an example.
I have come with this solution for you if you don't want to change the HTML code at all!
CSS will add a comma after the div.inner while javaScript will remove the existing comma.
let comma = document.querySelectorAll('.inner');
for (let i = 0; i < comma.length; i++){
comma[i].nextSibling.textContent = '';
}
.inner {
padding-left: 8ch;
text-indent: -6ch;
margin-bottom:15px;/*adds extra space at bottom*/
}
.inner:after{
content: ",";
}
.inner:last-child::after{
content: "";
}
<div class="container">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis leo diam. Donec mattis erat eget augue pellentesque sodales. Aliquam et augue eget libero mollis hendrerit eu a purus. Morbi bibendum, nunc eget lobortis porttitor, tortor velit posuere ex, at tempor eros orci auctor magna. Praesent maximus malesuada sodales. Integer convallis eget orci eget cursus</div>,
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis leo diam. Donec mattis erat eget augue pellentesque sodales. Aliquam et augue eget libero mollis hendrerit eu a purus. Morbi bibendum, nunc eget lobortis porttitor, tortor velit posuere ex, at tempor eros orci auctor magna. Praesent maximus malesuada sodales. Integer convallis eget orci eget cursus</div>,
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis leo diam. Donec mattis erat eget augue pellentesque sodales. Aliquam et augue eget libero mollis hendrerit eu a purus. Morbi bibendum, nunc eget lobortis porttitor, tortor velit posuere ex, at tempor eros orci auctor magna. Praesent maximus malesuada sodales. Integer convallis eget orci eget cursus</div>,
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis leo diam. Donec mattis erat eget augue pellentesque sodales. Aliquam et augue eget libero mollis hendrerit eu a purus. Morbi bibendum, nunc eget lobortis porttitor, tortor velit posuere ex, at tempor eros orci auctor magna. Praesent maximus malesuada sodales. Integer convallis eget orci eget cursus</div>,
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis leo diam. Donec mattis erat eget augue pellentesque sodales. Aliquam et augue eget libero mollis hendrerit eu a purus. Morbi bibendum, nunc eget lobortis porttitor, tortor velit posuere ex, at tempor eros orci auctor magna. Praesent maximus malesuada sodales. Integer convallis eget orci eget cursus</div>,
<div class="inner">Mauris aliquam luctus sem, non cursus libero cursus non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dignissim nisi eu elit placerat, vel euismod quam elementum. Nam fringilla tristique nibh a mattis. Duis finibus lacus libero, quis efficitur sem egestas vitae. Nunc auctor enim lectus, non finibus est tincidunt ut. Nulla commodo odio ut nisl ullamcorper vehicula.</div>
</div>
Related
I am having trouble setting up containers for a website I am making.
I have defined the width of a sidebar container, but when I put text in it to test, it pushes down the body instead of sitting next to it..
My code is as follows
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br></p>
</div>
<div class="container">
<p class="body">
Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home. <br>
We aim for quality customer service by providing:
</p>
<ul>
<li>Free quotes for cleaning, repairing and installing old and new blinds</li>
<li>Most jobs can be easily quoted over the phone</li>
<li>Premium quality blinds at competitive prices</li>
<li>Onsite, on-the-day cleaning and repairing</li>
<li>Wide variety of Australian-made blinds</li>
<li>Reliable and friendly service</li>
</ul>
</div>
#sidebar {width: 20%;margin-left: 10%;}
.container {width: 60%; margin-left: 30%; margin-right: 10%;}
You can see it in action at www.dweeman.com/eb/sitetemplate.html
I used a predone template for the navigation menu which had a few CSS elements, but I can't spot anything that would be interfering.
Any ideas what I am missing? I know the website looks terrible and has problems but it's still in early development.
Thanks
Update your HTML and CSS as mentioned below :
HTML :
<div style="float: left">
<div id="sidebar">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br>
</p>
</div>
<div class="container">
<p class="body">
Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home.
<br>
We aim for quality customer service by providing:
</p>
<ul>
<li>Free quotes for cleaning, repairing and installing old and new blinds</li>
<li>Most jobs can be easily quoted over the phone</li>
<li>Premium quality blinds at competitive prices</li>
<li>Onsite, on-the-day cleaning and repairing</li>
<li>Wide variety of Australian-made blinds</li>
<li>Reliable and friendly service</li>
</ul>
</div>
</div>
CSS :
#sidebar {
width: 20%;
margin-left: 10%;
float: left;
}
.container {
width: 60%;
float: left;
padding-left: 15px;
word-break: break-all;
}
You should use floats. try adding this to your sidebar and container..
#sidebar: {
float:left;
width: "";
height:auto;
}
and
#container {
float:left;
width:"";
}
Just make sure to fill the width with real values =)
Also make sure you are FTPing correctly. I don't see any floats on your page still =P
try adding this style overflow-wrap: break-word;
All you need to do is add float:left; to your sidebar:
#sidebar {
width: 20%;
margin-left: 10%;
float: left;
}
I'm creating a webpage where the content div should fill all of the screen. At the moment it shrinks to the amount of content.
The footer should be 'sticky' and sit at the bottom of the screen (imagine there's hardly any content).
I've got the footer bit sorted, I'm just struggling with the height of the content div. How do I go about making the content div fill up the entire screen?
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
#wrap {min-height:100%;}
header {
height:100px;
background:green;
}
#main {
background:yellow;
overflow:auto;
padding-bottom:50px;
}
#main {
font-size:28px;
overflow:none;
}
footer {
position:relative;
margin-top:-50px;
clear:both;
height:50px;
background:red;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<header>
This is the header
</header>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a viverra mauris. Aenean eu facilisis enim. Cras laoreet diam at lorem euismod condimentum. Morbi diam nisi, eleifend id varius vitae, ultrices sed nunc. Aenean facilisis, arcu sed congue tempor, leo nisi convallis dolor, et malesuada velit tortor id neque. Nullam nec eros est, at hendrerit risus. Vivamus in sollicitudin elit. Vivamus id odio justo, eget condimentum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mauris massa, iaculis eu laoreet sit amet, suscipit nec dolor. Ut rutrum porttitor viverra. Proin convallis, turpis id varius varius, nisi nulla vulputate dolor, vitae mattis neque quam ac nulla. Fusce accumsan, urna nec vulputate imperdiet, tortor erat fringilla massa, nec convallis ligula risus vitae mauris. Vivamus sagittis pulvinar ipsum, bibendum congue purus gravida posuere.</p>
<!--
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non lorem id ante scelerisque malesuada id ut nibh. Duis massa erat, dictum hendrerit interdum ut, faucibus non lorem. Sed velit leo, pellentesque sit amet dapibus vel, vestibulum ac sem. Nulla a hendrerit risus. In sodales ultricies lorem at tempus. Fusce sed velit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut mi nunc, et tristique ipsum. Cras lobortis augue eget enim sodales et sollicitudin turpis feugiat. Morbi a interdum felis. Donec porttitor nibh ut metus commodo et pulvinar dui pretium. Fusce pellentesque felis in metus vehicula feugiat.</p>
<p>
Duis suscipit nibh non leo venenatis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt sapien id purus tempus ac viverra sapien vulputate. Fusce eu tortor purus. Mauris sit amet diam a arcu hendrerit auctor. Mauris vel nunc nec leo gravida ullamcorper. Donec eu arcu nibh, eu feugiat lorem. Nunc euismod ligula nec est lobortis vehicula. Etiam feugiat lacus in nulla porttitor eu iaculis dui dictum. Nullam gravida enim in leo tempor euismod. Cras porttitor, neque at molestie egestas, metus nisl tincidunt lacus, non vestibulum metus sapien eu est. Mauris tempus mattis quam eu elementum. Curabitur tempor feugiat massa, sit amet tempor mauris fermentum ut. Nullam faucibus lobortis lectus, ac fermentum sapien venenatis eget.</p>
<p>
Nulla facilisi. Proin a lorem non justo gravida pharetra a at dolor. Phasellus vitae viverra purus. Nullam at tellus id orci ornare cursus. Maecenas velit ante, egestas eu auctor at, lacinia in massa. Morbi sit amet turpis a neque vestibulum pulvinar. Aliquam erat volutpat. Ut accumsan aliquet sodales. Praesent tortor turpis, vulputate quis bibendum eu, pharetra vestibulum nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem ac consectetur volutpat, diam sem bibendum lectus, vitae sagittis eros odio eget urna. Sed ipsum nulla, interdum nec accumsan at, faucibus at est. Vivamus faucibus condimentum erat, id varius metus cursus non. Vestibulum ut justo fringilla enim pellentesque auctor pretium eget quam.</p>
<p>
Ut in urna quis turpis placerat volutpat. Integer vel tincidunt sem. Pellentesque semper venenatis vestibulum. Pellentesque pretium volutpat neque eu dignissim. Aenean consectetur, magna in hendrerit sodales, mauris libero ullamcorper lectus, in imperdiet enim odio quis sem. Donec sed tellus urna, non sodales massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum dolor nec sem gravida dignissim. Curabitur in ante leo. </p>
-->
</div>
</div>
<footer>
This is the footer
</footer>
</body>
</html>
Try to set the footer to
position: fixed
bottom: 0
left:0
This should do the trick positioning the footer sticky to the bottom. But if the body expands beyond the footer it could pose an issue.
It seems like you might already know this, but in order to make an element fit the height of the viewport, it, as well as every other ancestor element, needs to be 100% height.
You've already done this for body and html (which is good), but you need to do this for #wrap too. Min-height won't work for that. Then, you'll want to set your header to a percentage height too so that you can have the #main div fill up the rest of the viewport. Something like:
#wrap { height: 100%; }
header { height: 10%; }
#main { height: 90%; }
This should take care of filling up the viewport, since your html and body are already set to height: 100%;
In Chrome (I am using version 16.0.912.75 m on Win 7) I find that no matter what I have a cursor set as, as soon as I hold my left mouse button down and move the cursor then the cursor type is changed to text (even when there is no text anywhere on the page).
Is this a bug? Does anyone know how to get around it as it is making my drag and drop tool look a bit silly!
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
}
<div></div>
Original JSFiddle: http://jsfiddle.net/KJfbs/
Edit
As answered by #davgothic below, adding -webkit-user-select: none; will fix the issue when there is no text. However, should we position the element absolutely and place text behind it then the problem persists.
div {
background-color: lime;
height: 100px;
width: 300px;
cursor: wait;
-webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis eros mi, non tristique diam. Cras auctor posuere urna, porta egestas metus sollicitudin at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer id arcu quis ipsum feugiat consequat id sit amet velit. Vivamus at quam quis lacus pellentesque egestas eu sed nulla. Vestibulum arcu augue, ultrices quis lobortis vehicula, molestie ut velit. Donec egestas lacus id diam euismod a lacinia lorem ultrices.
Vivamus non mi nunc. Pellentesque vitae sodales magna. In ac urna tortor. Quisque mattis mollis magna ultricies pellentesque. Mauris sed lorem eget sem imperdiet volutpat. Fusce fringilla pretium enim, eu ultricies justo fringilla in. Aliquam ac dui risus, ut eleifend tellus.
Nulla facilisi. Fusce nec leo lectus, in porttitor est. Etiam in posuere tellus. Maecenas viverra nibh et odio aliquam at aliquet arcu ultricies. Aliquam in arcu ac mi mollis ultricies vitae dapibus risus. Integer a arcu eu ipsum fermentum dignissim a vitae nunc. Pellentesque consectetur rutrum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi semper dapibus nunc. Mauris congue est sit amet neque condimentum nec fermentum massa sagittis. In bibendum cursus tortor quis scelerisque. Mauris est nisi, elementum eu scelerisque vel, placerat quis erat. Nam malesuada massa quis sem eleifend tempor eget ut erat.
Etiam egestas ligula nec odio molestie placerat. Donec nunc dolor, venenatis id iaculis vel, dapibus quis justo. Suspendisse sed nunc eget nunc luctus hendrerit eget at tortor. Quisque consectetur, eros eget dictum lobortis, erat nisl eleifend metus, egestas vulputate purus urna ut arcu. Nunc mollis tempor mi, quis commodo diam semper id. Nulla sed urna sit amet tellus consequat elementum. Maecenas cursus ipsum sit amet nunc laoreet quis placerat urna tempor. Maecenas tristique sodales posuere. Mauris scelerisque ornare tincidunt. Nulla tempus gravida orci, vel lacinia ante placerat ac. Donec gravida erat vitae elit suscipit ac ullamcorper lacus faucibus.
Aenean dictum elit eu nunc varius suscipit. Praesent ultrices, nunc ullamcorper posuere consectetur, purus ipsum dictum nisl, ultrices rhoncus nisl mauris sit amet dui. Donec convallis arcu eu nibh laoreet pulvinar. Sed euismod volutpat nibh eget faucibus. Maecenas interdum dapibus consequat. Sed sit amet leo lectus, euismod molestie nunc. Donec dui tellus, dignissim ut luctus non, facilisis eu magna. Phasellus a neque et dui luctus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat mollis dui, eget varius nunc gravida eu. Vivamus nibh erat, dapibus eu mattis blandit, sodales ut nisi. Vivamus pellentesque congue placerat. Pellentesque ultricies turpis vel odio imperdiet et facilisis leo viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Original JSFiddle: http://jsfiddle.net/KJfbs/2/
Try adding -webkit-user-select: none; to the CSS for that element to prevent text selection.
Example: http://jsfiddle.net/KJfbs/1/
Personally I would also add these...
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
...for cross browser compatibility.
I think that with -webkit-user-select: none; the problem persists if you put anything else in the page. For instance: http://jsfiddle.net/KJfbs/237/
Anyway I think jQuery preventDefault solves the problem in any case:
http://jsfiddle.net/KJfbs/241/
preventDefault avoids the default behavior that is change to cursor text.
Then I can control and put any cursor I want: $(this).css("cursor","wait");
JQUERY:
$(function(){
$('#lime').mousedown(function(e) {
e.preventDefault();
$(this).css("cursor","wait");
}).on('mouseup mouseleave', function() {
$(this).css("cursor","default");
});
});
HTML:
<div id="lime"></div>
<p>Lorem ipsum dolor sit amet</p>
CSS:
#lime {
background-color: lime;
height: 100px; width: 300px;
cursor: wait;
position: absolute;
top: 0; left: 0;
}
I am trying put ads inside my blogger post & i want my data to wrap around the ads.I am using following code to make this happen.
Ex. Desired output.
.
<div style='float:right;margin:50px 0px 0px 0px;'>
<!-- AD1 Code -->
</div>
<data:post.body/>
<div style='float:left;margin:0px 0px 50px 0px;'>
<!-- AD2 Code -->
</div>
But i am not able to wrap the text around it & Second div sticks to the bottom without showing any data on the right side.
Is there any property which is left to be added apart from Float and margin.
EDIT: <data:post.body/> is the tag which fetches every blogger post content. so the data for the post come automatically. This code has to be added in the template so that it works for every post. I can't hard code the Div tags inside every post so i need some method to arrange ads around my post.
I can put the divs with the specified properties at the starting or ending of the <data:post.body/> tag.
Thanks.
You can try this :
<div style="text-align:justify">
<div
style="float:right;margin:5px;border:2px solid red;height:100px;width:100px">
Ad 1
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis
ultrices felis, sed faucibus elit sollicitudin eu. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Etiam id mi a elit luctus tristique. Curabitur pharetra magna ac nisi
accumsan a consequat magna placerat. Aliquam erat volutpat. Integer id
felis ante, et malesuada leo. Duis scelerisque vulputate lorem, at
cursus eros rutrum pulvinar.
Nunc tempus ultricies varius. Suspendisse interdum imperdiet enim, quis
aliquam sapien pulvinar in. Morbi vulputate euismod elit, ut ultricies
lectus dignissim at. Venenatis ullamcorper purus at consequat. Integer
ultricies, quam vitae fringilla venenatis, urna felis tincidunt turpis,
quis volutpat nisi felis tincidunt turpis. Proin at metus sit amet augue
convallis laoreet. Etiam viverra mollis ornare.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Pellentesque libero lectus, laoreet quis consectetur sit
amet, laoreet vel. Suspendisse commodo fringilla facilisis. Nam viverra
laoreet lorem, at molestie vestibulum non.
<div
style="float:left;margin:5px;border:2px solid red;height:100px;width:100px">
Ad 2
</div>
Etiam ut nulla justo. Quisque dignissim ultrices faucibus. Maecenas volutpat,
eros nec rutrum eleifend, enim dolor gravida nulla, quis vestibulum neque
dolor vel purus. Etiam imperdiet mollis magna, eget interdum eros tincidunt
quis.
Sed a ligula metus, ac ornare elit. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Suspendisse sit amet lacus felis.
Phasellus ultrices facilisis interdum. Morbi dapibus turpis a nisl mollis in
hendrerit quam luctus. Cras eleifend mauris eu lectus viverra ullamcorper.
In sed erat et lacus dapibus fermentum. Donec bibendum, eros ac convallis
fermentum, dolor justo tincidunt risus, vitae lacinia lorem risus eu ipsum.
Morbi fringilla ante ut ipsum blandit vehicula.
</div>
Preview : http://jsfiddle.net/Gs2kD/
The "clear" attribute can prevent any floaters at the same Y position as the element that it's on.
Check out Sandbag Float Pusher, and the other sandbags on css-lab.com. It uses a thin dummy floater on the same side to push the "ad" down to where you want it. The "ad" has "clear" set. This technique allows you to flow the content in without modification, as you require.
Google for css sandbag for more techniques.
You can put the ads inside the post with JavaScript, especially easy with jQuery for example.
The only thing you have to figure out, is how to find a good location for you ads, i.e. where to actually insert them in the code.
My question is very basic and generic.
I am starting on designing a page(s) using div tags. now I am confuse with two approaches.
should I keep width and height of divs fixed (i.e. fixed with pixels) or
should I keep width and height of divs variable (i.e. using % instead of pixels).
I personally like the first approach where you fix everything and there is very little chance of anything getting disturbed at different screen resolution but the drawback is if screen resolution goes below my expected screen resolution then the scroll bars makes the site look bad(there may be more drawbacks but at present I am not remembering it :) ) , so in that case 2nd approach comes into the picture but the thing is once you start using % for your width and height its very difficult to design the page though once its designed its more stable.
I am confused with the two approaches and need inputs on the above two...
thanks in advance.
You answered your own question. The second approach is better in most of the situations, as it would fit all the screen resolutions nicely. Think of when somebody tries loading your page using a mobile phone, then using percentage will help.
And I don't think using percentage make it harder to design, I even think it's easier. For example, if you want to adjust the main table width to be 1/4 of the screen, now you only need to set width: 25% instead of setting (say) width: 250px; and guess if it works on this size of monitor or different sizes of monitor.
Imagine that you're currently working on a 17" laptop, and the width of your page layout is set fixedly 800px that would fit your screen at the moment. But when you run it on the 24" monitor, that layout will look like a paper on a desk.
With percentage, say, 70% would fit your 17" laptop and also, 24" monitor.
Here is a sample fluid HTML page for you to reference, try to see how it looks with percentages. Note that no matter you minimize the screen, the layout can still adjust. Just simply copy and paste, this is the point of designing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
html, body{
height:100%;
}
/* Backward Compatible for IE6 */
* html #container{
height:100%;
}
/* Top logo and bottom footer */
div#logo, div#footer {
max-width: 90%;
color:#000000; background-color:#ffffff;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Top navigation bar */
div#navbar {
max-width: 90%;
color:#ffffff; background-color:#124a9f;
padding:10px 0px 10px 0px;
text-align:center;
margin-left:auto; margin-right:auto;
}
/* Container for three lower boxes */
div#container {
max-width: 90%;
height:70%;
color:#000000; background-color:#ffffff;
margin-bottom:10px; margin-left:auto; margin-right:auto;
}
/* Main content (center box) */
div#main {
overflow:auto;
height: 100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#efecf8;
}
/* Full navigation menu (left box) */
div#leftcol {
float:left;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
/* Featured content (right box) */
div#rightcol {
float:right;
width:10%;
height:100%;
padding:10px 10px 0px 10px;
color:#000000; background-color:#bfdbf7;
}
</style>
</head>
<body>
<div id="logo">
Logo
</div>
<div id="navbar">
Navigation Bar
</div>
<div id="container">
<div id="leftcol">Left Column</div>
<div id="rightcol">Right Column</div>
<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.
</div>
</div>
<div id="footer">
©2011 Ideal Web Design Co.
</div>
</body>
</html>
It all depends on the layout and design of the website you are creating.
the 2nd approach is used in "fluid" layouts (websites that need to extend and take all the space available to them), otherwise you don't have other notable advantages vs. fixed layouts.
I recommend that you look at the statistics on screen resolutions provided by W3C here:
http://www.w3schools.com/browsers/browsers_display.asp
As you can see, 800x600 is almost gone, so focusing on 1024x768 and up will help.
I don't know how far you are into the learning process, but when you feel like taking a look at what most developers use, I recommend you visit the 960 grid system:
http://960.gs/
That's a question that really depends on what functionality will reside within those divs. If it needs to grow, then percentage is probably warranted. If not, then you should be ok with using px
I guess the 1st approach is better for 99% of the wepapps. You can look Blueprint css framework, is a very easy and clean way to use grid like layouts.