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.
Related
i am getting an issue when design email template in the SendGrid.
I used css inline, i want to subText max 3 line.enter image description here
Look good in the design, but when received email, 3 properties -webkit auto removed enter image description here
it only keep be 2 properties.
help me, thank you
I tested the following on Litmus:
<div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
This worked only on Apple Mail, iPhones, and Samsung mail (Android).
You can use overflow:hidden with a max-height, and that will work with everything except MS Outlook Desktop (Windows). There is no fix for that, since it doesn't support overflow or max-height or anything (it supports a bit less than HTML4).
<div style="max-height:60px;overflow:hidden;width:300px;line-height:20px;">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
What I've done here is calculated what the height of 3 lines would be (line-height of 20px * 3 = 60px), and used that as the height of a wrapping div.
Max-height is needed for Gmail iOS, which changes height:60px into height:auto.
How do i position a centered text or logo (picture 2) at the bottom of the viewport similar to a footer? When the dropdownmenue (picture 3) opens the logo or text should move accordingly to the new height.
So the div below point 5 should dynamically change its height or get out of site in case.
I tried several solutions i googled prior but somehow all did not work like i wanted it to be.
If you know the height of the footer, then you could use min-height, absolute positioning and padding-bottom. However I'm going to assume the more difficult case in which you don't know the height.
<style>
* {box-sizing:border-box;}
.wrapper {min-height:100vh;display:flex;flex-direction:column;}
.main {flex:1 0 auto;}
.footer {background-color:yellow;padding:16px;font-weight:bold;flex:0 0 auto;}
</style>
<div class="wrapper">
<div class="main">
<h1>
Main
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet, nibh id placerat viverra, justo purus semper dolor, at lacinia eros mauris eu libero. In finibus a urna dapibus tempus. Aenean ipsum urna, tempor at lectus non, blandit feugiat quam. Donec sed ante orci. Integer laoreet est erat, a feugiat leo posuere sed. Mauris sit amet metus finibus, dapibus nunc ut, molestie erat. Nullam rhoncus sagittis lacus id finibus. Etiam sollicitudin nibh dui, a mollis nisl pharetra vitae. Suspendisse nec laoreet ipsum. Fusce sit amet tempor sem. Vestibulum consequat est in nisl aliquam ornare. Aliquam erat volutpat.
</p>
<p>
Sed vulputate nisl ac est eleifend bibendum. Nullam cursus at ex sit amet dignissim. Sed blandit pretium venenatis. Phasellus at ullamcorper nibh. Aenean nec lectus semper, efficitur diam in, luctus nisi. Phasellus in ligula congue, cursus nunc et, luctus mi. Suspendisse a leo luctus, molestie elit sed, venenatis sem. Nullam lobortis ante nec dictum elementum. Praesent aliquam orci quis molestie consectetur. Aliquam ornare a ipsum dapibus pulvinar. Morbi aliquet posuere ligula, vel volutpat dolor pellentesque vel. Vivamus non euismod leo. Duis feugiat velit a est tincidunt pulvinar. Proin blandit malesuada pulvinar. Nunc ut elementum ex, non vehicula tortor.
</p>
</div>
<div class="footer">
Footer
</div>
</div>
Change the height of your browser up and down to see how this works - the principle is a vertical flexbox that's at least the height of the screen, and a footer that's always at the bottom because the main content grows to fill any spare space.
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>
I'm trying to create a CSS theme for a blog (which I cannot change the HTML of). I want to make the entries go in columns (of which there is no set number), and have a horizontal slide to be able to slide through the posts; the columns will be the same size and they will be filled.
Unfortunately, after writing out the code, I have found a strange bug - when I use overflow: scroll, some columns somehow get cut off. I have made an example of this here - after several columns, with more entries to go, the text starts getting cut off, even where there's more left.
What I've noticed is that it is not dependent on the number of columns - if the width of the columns is smaller, there will be more columns. The cutoff point seems to be arbitrarily determined, but I have no idea why or how.
Is there a way to fix this? I've searched a lot for a solution, but all I've found are questions about disappearing scroll bars, not disappearing content.
So far, I have only seen this in Chrome. I have tested it on Internet Explorer, Firefox, and Safari, and it works on all of those three, but not Google Chrome. This seems to only happen in some versions of Chrome - a Chromebook user reported that the CSS was, indeed, working on his device.
div #entries{
height: 60vh;
column-width: 40vw;
overflow-x: scroll;
}
<div id="container to keep in">
<div id="entries">
<div class="entry">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia scelerisque mauris, sit amet rutrum est. Donec placerat, arcu in feugiat fringilla, justo neque bibendum odio, feugiat efficitur ex turpis in nulla. Proin cursus rutrum nunc eget egestas. Quisque interdum ultrices orci in posuere. Integer enim nunc, euismod tempor blandit eu, molestie vitae libero. Morbi erat dolor, congue non arcu et, iaculis dictum orci. Curabitur id tellus et eros rutrum luctus vitae sed velit. Integer vestibulum quam arcu, ut malesuada eros rutrum nec. Etiam ullamcorper ultrices libero, vel euismod mauris mollis vitae. Vivamus et nisl eget nulla euismod bibendum id sed augue. Vestibulum ultricies non felis sollicitudin elementum. Fusce sed diam aliquet est volutpat placerat vitae sit amet ante.
Anean eget egestas dui. Curabitur tristique ullamcorper augue, sit amet tristique nibh dapibus non. In ut sodales felis, et dictum diam. Cras ornare libero vitae quam laoreet, et rutrum purus luctus. Aenean tincidunt elit vel nibh facilisis euismod. In tempor erat tellus, in convallis nisi lacinia in. Etiam pulvinar finibus elit sit amet tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac fermentum nisl. Donec cursus purus at libero egestas volutpat. Nullam tincidunt lectus eu purus dignissim scelerisque.
</div>
<div class="entry">
Aliquam tempus nibh volutpat arcu semper pulvinar. Donec nec mauris nec metus dapibus auctor. Vestibulum eu tincidunt sem, sit amet auctor neque. Nulla ut enim diam. Donec est orci, pharetra id sapien eget, dictum blandit arcu. Suspendisse tempus consectetur aliquet. Donec eget consectetur enim, eu tincidunt diam. Morbi mi tellus, mattis eget velit ut, pretium scelerisque diam. Proin ut tortor hendrerit, elementum turpis sit amet, tempor mauris. Nunc semper ex quis augue vulputate, non molestie velit tincidunt. Maecenas faucibus augue dui, in condimentum lectus pellentesque eu.
</div>
<div class="entry">
Nulla eu ante nec lorem malesuada bibendum. Maecenas egestas mi et ornare mollis. Integer sed risus nulla. Aenean nunc nunc, pretium in elit vitae, semper maximus enim. Nulla dignissim vestibulum tellus sit amet fringilla. Nulla convallis, eros quis malesuada cursus, velit augue consequat eros, et tincidunt lacus mauris ut enim. Quisque facilisis magna facilisis eleifend maximus. In vel scelerisque turpis. Curabitur tempor libero diam, vitae pretium ex finibus sed.
Quisque dui justo, ultrices in velit in, vulputate sollicitudin turpis. Morbi sem velit, interdum a risus vitae, molestie sodales urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in lacus sapien. Sed mattis maximus dui, vitae rhoncus sapien sodales sed. Ut malesuada, urna et varius varius, mauris neque viverra diam, ut rhoncus sem magna ut purus. Phasellus vestibulum aliquet elit tempor mattis. Phasellus venenatis, velit a tempus viverra, nisl arcu mattis nibh, a molestie lectus ligula vel lacus.
</div>
</div>
</div>
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;
}