I'm having an image and I want to put the text on left side of image, but I couldn't do it.
Following is my code:
<div style="float:right; width:75%;">
<p style="float: left;">Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.</p>
<p style="float: left;">View Details</p>
<img src="images/disp_1_jis_logo.jpg" style="float: right;">
</div>
The screenshot is attached with this post. Can anyone help me to place the text on left of the image? And pull the image upward so that it could be inline with the text.
Remove float:left 's from p tag and div.
Add display:inline-block to p tag.
Move the image tag to the top
<div style=" width:75%; display:inline-block">
<img src="images/disp_1_jis_logo.jpg" width="150"style="float: right;">
<p>Affiliated..</p>
<p >View Details</p>
</div>
DEMO
If you can't change the order of the elements add an width to the first p element.
<p style="float: left; width: 50%">Affiliated ...</p>
Try out this:
<div style="float:right; width:75%;">
<p style="float: left; display: inline-block; width: 800px;"><img src="test.jpg" style="float: left; padding: 0px 10px 10px 0px;">Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International School is purely english medium from LKG to 10th. It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.
equipment, which includes extramarks SMART LEARN CLASS, completely automated school automation software - SchoolPrime, SMS based parent information system, centralized examination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.</p>
<p style="float: left;">View Details</p>
</div>
Think of it like this - by default, every block element, like a paragraph or an image or a div, is placed on a new line starting on the left hand side of its container element, e.g. the body of the page, or another div.
To change this default placing, you float the element you want to move, in this case the image, to the side you want it on, i.e. <img src="images/disp_1_jis_logo.jpg" style="float: right;">, as you have in your code. This puts the element on the extreme right hand side of the container element, on whichever line it is on in the code. Any following element can appear to start on the same line, and will be placed on the left hand side of the line. So, the paragraph you want on the left should be the next element after the image, i.e.
<img src="images/disp_1_jis_logo.jpg" style="float: right;">
<p>Affiliated to Board of Secondary Education Rajasthan, Jhunjhunu International
School is purely english medium from LKG to 10th. It is equipped with most modern
study and play equipment, which includes extramarks SMART LEARN CLASS, completely
automated school automation software - SchoolPrime, SMS based parent information
system, centralized examination and evaluation, world class celebrations, hobby
classes, personality development and above all, Professionally trained team of
teachers.</p>
<p>View Details</p>
You can also float elements out of other block elements, i.e. if the image were within the first paragraph block, it would behave in a similar manner.
try this.
<div style="float:right; width:75%;text-align: justify;">
<p style="float: left;">
Affiliated to Board of Secondary Education Rajasthan,
<img src="images/disp_1_jis_logo.jpg" style=" float: right; margin:5px;">
Jhunjhunu International School is purely english medium from LKG to 10th.
It is equipped with most modern study and play equipment, which includes extramarks SMART LEARN CLASS, - SchoolPrime, SMS based parent information system, centralized xamination and evaluation, world class celebrations, hobby classes, personality development and above all, Professionally trained team of teachers.
<p style="float: left;">View Details</p>
</div
Related
I am trying to do columns for text paragraphs, and I have found a way to do it using position: absolute, but with larger/smaller screen sizes it moves around rather, unfortunately. What is the best way to do columns? And why won't they line up in this case?
.italic2{font-family: serif; color: #cc9900; font-size:18px; width: 150px;}
.header3{font-family: helvetica; font-size:17px; letter-spacing: 3px;}
#column{
text-align:left;
line-height: 1.5;
width: 35%;
position: absolute;
float: left;
left: 12%;
}
#column1{
text-align:left;
line-height: 1.5;
width: 35%;
float: left;
position: absolute;
left: 62%;
}
<div id="header">
<p><span class="italic"><i>the</i></span><span class="header1">  ENGLISH CLASS WEBSITE</span><br><br><div id="header2"> <span class="italic2"><i> Welcome to the English Class Website, English Students <img src="assets/img/smilingheart.png" height="20px" width="20px"> They say that the road to hell is paved with good intentions & if you ever feel like a lot of things are missing on this site, that it is never updated or you would rather go watch paint dry, well at least I tried. For a while. (It's in hell)</i></span></p>
</div>
<div id="column"><span class="textfont"><p>The English Class Website aims to assemble some of all the exciting subjects, information and materials, be it literature, films, music, TV-series, video games etc., that we already have been working with, or potentially could be working with, during our many English lessons together. It also provides tips and tricks on how to analyse different genres and types of texts as well as information on how to write essays yourself. Hopefully, it will be of use when you are getting ready for the exams. </div><div id="column1">If you are not a student and have stumbled upon this site by accident, you are of course more than welcome to browse through the contents, but please keep in mind that The English Class Website is only intended to make life easier for students and, well at least one teacher. Furthermore, if you represent any copyright institutions and feel that any, unintentional I must add, copyright infringement occurs I would much prefer to be contacted at aaa#aaa.com rather than sued.
</div></div>
Argh. Why is this jsfiddle thing never working for me?
You can use column-width to set the basic column size on the container element and allow the width + the viewport width to determine how many columns the screen will show. If you want a fixed number of columns (only 2), you can set column-count to set a specific number of columns and allow the width to change dynamically.
Here's an example of how to use both of them.
Use the codepen to play with the viewport's width
https://codepen.io/neilkalman/pen/OZyvRK/left
.italic2 {
font-family: serif;
color: #cc9900;
font-size: 18px;
width: 150px;
}
.header3 {
font-family: helvetica;
font-size: 17px;
letter-spacing: 3px;
}
#column {
column-width: 150px;
text-align: left;
line-height: 1.5;
}
#column-2 {
column-count: 2;
text-align: left;
line-height: 1.5;
}
.container {
max-width: 70vw;
margin: 20px auto;
}
<div id="header">
<span class="italic">
<em>the</em>
</span>
<span class="header1">  ENGLISH CLASS WEBSITE</span>
<br><br>
<div id="header2">
<span class="italic2">
<em>
Welcome to the English Class Website, English Students
<img src="assets/img/smilingheart.png" height="20px" width="20px">
They say that the road to hell is paved with good intentions & if you ever feel like a lot of things are missing on this site,
that it is never updated or you would rather go watch paint dry, well at least I tried. For a while. (It's in hell)
</em>
</span>
</div>
</div>
<div class="container">
<div id="column">
<span class="textfont">
The English Class Website aims to assemble some of all the exciting subjects,
information and materials, be it literature, films, music, TV-series, video games etc.
That we already have been working with, or potentially could be working with,
during our many English lessons together. It also provides tips and tricks on how to
analyse different genres and types of texts as well as information on how to write essays
yourself. Hopefully, it will be of use when you are getting ready for the exams.
If you are not a student and have stumbled upon this site by accident, you are of
course more than welcome to browse through the contents, but please keep in mind that
The English Class Website is only intended to make life easier for students and,
well at least one teacher. Furthermore, if you represent any copyright institutions and
feel that any, unintentional I must add, copyright infringement occurs I would much prefer
to be contacted at aaa#aaa.com rather than sued.
</span>
</div>
</div>
<div class="container">
<div id="column-2">
<span class="textfont">
The English Class Website aims to assemble some of all the exciting subjects,
information and materials, be it literature, films, music, TV-series, video games etc.
That we already have been working with, or potentially could be working with,
during our many English lessons together. It also provides tips and tricks on how to
analyse different genres and types of texts as well as information on how to write essays
yourself. Hopefully, it will be of use when you are getting ready for the exams.
If you are not a student and have stumbled upon this site by accident, you are of
course more than welcome to browse through the contents, but please keep in mind that
The English Class Website is only intended to make life easier for students and,
well at least one teacher. Furthermore, if you represent any copyright institutions and
feel that any, unintentional I must add, copyright infringement occurs I would much prefer
to be contacted at aaa#aaa.com rather than sued.
</span>
</div>
</div>
column-width and column-count have good browser compatibility as of writing this answer :-)
https://caniuse.com/#search=column-width
The reason the columns won't line up is your random use of tags. Surrounding the text in each column with proper opening and closing p tags will straighten them out.
<div id="header">
<p><span class="italic"><i>the</i></span><span class="header1">  ENGLISH CLASS WEBSITE</span><br><br><div id="header2"> <span class="italic2"><i> Welcome to the English Class Website, English Students <img src="assets/img/smilingheart.png" height="20px" width="20px"> They say that the road to hell is paved with good intentions & if you ever feel like a lot of things are missing on this site, that it is never updated or you would rather go watch paint dry, well at least I tried. For a while. (It's in hell)</i></span></p>
</div>
<div id="column"><span class="textfont"><p>The English Class Website aims to assemble some of all the exciting subjects, information and materials, be it literature, films, music, TV-series, video games etc., that we already have been working with, or potentially could be working with, during our many English lessons together. It also provides tips and tricks on how to analyse different genres and types of texts as well as information on how to write essays yourself. Hopefully, it will be of use when you are getting ready for the exams.</p></div>
<div id="column1">
<p>If you are not a student and have stumbled upon this site by accident, you are of course more than welcome to browse through the contents, but please keep in mind that The English Class Website is only intended to make life easier for students and, well at least one teacher. Furthermore, if you represent any copyright institutions and feel that any, unintentional I must add, copyright infringement occurs I would much prefer to be contacted at aaa#aaa.com rather than sued.</p>
</div>
</div>
I am trying to create an about page for a personal website. I am wondering how to wrap the text around the picture. I want this kind of effect. http://alexbudak.com/about/
The code I have right now is:
<div class="about_content">
<img src="placeholder.jpg" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>
and the css is:
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
}
.about_content p: last-child{
margin-bottom: 0;
}
What you have now will cause the content to wrap around the image. The trick to doing this is applying float: left; to the image, which you have already done.
What I'm suspecting is happening is your image is too wide. If it's 500px or wider, the image will take up the entire width of .about_content, so you need to limit the size of the image. Here's an example utilizing max-width on the image.
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
max-width: 250px;
}
.about_content p: last-child{
margin-bottom: 0;
}
<div class="about_content">
<img src="https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/54b43e30e4b0ad2aad39a7f2/1421098552235/budak?format=500w" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>
On my Wordpress page, I have the following code:
<div class="row">
<div class="col-md-6">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " /></a>
</div>
<div class="col-md-6">
<h1 class="text-center">Vision</h1>
<span style="font-size: 12.0pt;">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</span>
<h1 class="text-center">Mission</h1>
<span style="font-size: 12.0pt;">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</span>
<ul>
<li><span style="font-size: 12.0pt;">Building, managing and supporting cross-sector coalitions</span></li>
<li><span style="font-size: 12.0pt;">Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</span></li>
<li><span style="font-size: 12.0pt;">Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</span></li>
<li><span style="font-size: 12.0pt;">Advocating and shaping policy to support improvements of systems</span></li>
</ul>
</div>
</div><!--end div class="row"-->
You can see how it looks here.
As you can see, the text stays floating to the right 50% inside the wordpress page template area. I would like the text to start taking up 100% of the available area once it hits a new line that is underneath the first picture column to the left.
For an example of how I want it to look, check out our old Squarespace site and zoom in if you have a high aspect ratio.
I know similar questions have been asked before but I have not been able to find an answer while using the Bootstrap framework.
Bootstrap is not terribly different than designing in tables. I mean, they even call them rows and columns. It's 1990's web design using CSS. (I'm only half kidding).
If you want that image to do what you're asking, you should combine your bootstrap columns (just use one col-md-12) and use CSS to float the image left.
Your other option is to decide what text you want always to the side of the image, and what you want under it, and to move that text to a new row with a new col-md-12.
See this answer, it is about Bootstrap - Wrapping Columns Around Larger Column
This is not a 'bootstrap' specific issue. All bootstrap does is use some class names with a long stylesheet.
Unrelated - I would remove those inline styles also.
Thanks to the tips of both #BenFried and #Rkhayat , I was able to come up with some code that is functioning.
<div class="row">
<div class="col-md-12">
<a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
<img class="img-responsive" style="float: left; padding-right: 1em; padding-bottom: 1em;" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " width="50%" />
</a>
<h1 class="text-center">Vision</h1>
<p class="text-justify">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</p>
<h1 class="text-center">Mission</h1>
<p class="text-justify">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</p>
<ul>
<li>Building, managing and supporting cross-sector coalitions</li>
<li>Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</li>
<li>Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</li>
<li>Advocating and shaping policy to support improvements of systems</li>
</ul>
</div> <!-- end <div class="col-md-12"> -->
</div> <!-- end <div class="row"> -->
There is white space below my div in Firefox but not in Chrome. I think it has something to do with my #body-content-container having the properties position: relative; and bottom: 300px; this gets the right positioning effect I'm looking for in Chrome, but in Firefox it creates a white space. When I get rid of these lines the div isn't positioned in the right place in either FF or Chrome.
Here's the code:
HTML:
<div id="body-content-container">
<div id="body-content"class="row">
<div class="small-12 small-centered columns">
<br/>
<div align="center" id="page-title">COMPANY</div>
<h1 align="center">About Us</h1>
<p>ADU Consulting has been developing quality e-learning programs since 2004. It is a training and education company that collaborates with partner organizations in developing, hosting and managing online educational programs based on the individual curriculum and client needs.</p>
<p>It operates from two regional offices one in New York and another in Northern Virginia, close to the capital city of Washington D.C. The ADU datacenter is also located near the corporate office in Virginia.</p>
<p>We:</p>
<ul>
<li>Develop e-Learning courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>ADU business is divided into two areas: <span style="font-family:FuturaStd-Heavy;">e-Learning Consultancy</span> for client organizations and running its <span style="font-family:FuturaStd-Heavy;">International Maritime College</span> where it offers a number of Certificates, College Primers and Vocational Skill Development programs, aimed primarily at the maritime industry. These courses focus on training the seafarers and the shore based employees within the shipping business.</p>
<p>ADU fills the gap between traditional education and the needs of people today. Interactive courses taught by experienced professionals help students keep pace with changing industry demands in addition to providing a holistic and need-based education. Our Instructors are picked from around the world with the majority from the United States; they have the highest professional and academic backgrounds that befit the purpose of industry ready education and training.</p>
<h1 align="center">Our Purpose</h1>
<p>We believe that online education's role is to compliment the "best" practices in education. It must support instructors to teach a larger student body and make learning possible based on individual learning needs. With this in mind, our integrated learning platform is equipped with necessary tools in helping the Instructors create a self-paced learning environment.</p>
<h1 align="center">Technology</h1>
<p>The LMS software and courses system is housed in a tier 1 datacenter that has a redundant firewall, switches and servers for complete data security. This hosted delivery model provides scalability, reliability and eliminates technological burden on client resources.</p>
<h1 align="center">Course Development</h1>
<p>ADU Consulting's content creation and delivery platforms are tied together such that it allows faculty to modify, or enhance contents to fit their unique teaching style. Thus a course developed for an organization can be further customized by the Instructor. In addition, since the world of online resources is expanding every minute, Instructors are able to link external content or add other resources through this platform. The student assessment is an integral part of the learning and evaluation process: the platform is configured with a question bank and a multi-faceted assessment system.</p>
<h1 align="center">Support</h1>
<p>In order to keep pace with the changing landscape of online learning ADU Consulting's platform is constantly updated in keeping with such advances. We are committed to support our partners both from technical management and pedagogical viewpoint.</p>
<h1 align="center">Course Delivery</h1>
<p>Courses are delivered to students in an asynchronous mode that allows students to learn at their own pace and allows flexibility when they want to study; Collaboration and communication with faculty is done in a synchronous mode through online video conferencing. The teacher-centric approach helps to consolidate and maximize the learning outcome.</p>
<h1 align="center">Course Creation & Quality Control</h1>
<p>ADU Consulting has an e-learning Quality Management Process that looks at various quality attributes in a course that must be meet to meet the ADU performance criteria. This is an internal quality audit system that must be satisfied before a course can be put on line for client review. The QA task is done from Virginia.</p>
<p>ADU Consulting’s courses are built at Chennai, India with an affiliated organization that maintains a large content development team including subject matter experts, instructional designers, graphic designers, Flash and other programmers, voice-over specialists etc.</p>
<p>The development is an iterative process and is only signed off once the user client is fully satisfied with the intended and agreed quality standard.</p>
<h1 align="center">Collaberation Projects</h1>
<p>ADU Consulting collaborates with partner organizations in developing, hosting and managing online educational programs based on individual curriculum and client needs and this may take any of the following project types:</p>
<ul>
<li>Develop e-Learning Courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting for e-learning services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center">
<h1>Contact Us</h1>
<span style="font-family:FuturaStd-Heavy;font-size:20px;">ADU Consulting Services</span>
<br/>
<p>6 Pigeon Hill Drive Suite 230<br/>
Sterling, VA 20165<br/>
United States of America</p>
<p>Email: info#adu.us.com</p>
<p>Telephone: (804) 205-1210<br/>
Fax: (703) 738-7723</p>
</div>
</div>
</div>
<div align="center" id="footer">
<br/>
Copyright © <script type="text/javascript">
document.write(new Date().getFullYear());
</script> ADU Consulting, All Rights Reserved. Site designed & developed by <a target="_blank" style="text-decoration: underline;" href="http://zrrdigitalmedia.com">zrrdigitalmedia</a>
<br/>
<br/>
</div>
CSS:
#body-content-container{
background-color: #d5b93f;
position: relative;
bottom: 300px;
}
Also here's a link to the site: http://zrrdigitalmedia.com/_ADU/company.html
I'm super lost here, any suggestions are much appreciated! Thank you!
Try changing the bottom value for the #body-content-container.
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: -15px; /* change 300px to -15px */
}
Tested on both, Firefox and Chrome.
Alternatively you can target Mozilla Firefox and add a negative margin-bottom
to the #body-content-container:
#-moz-document url-prefix() {
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: 300px;
margin-bottom:-320px; }
}
Some digging in FireBug lead me to this:
#body-content-container {
background-color: #d5b93f;
bottom: 300px; /* <-- this is the issue, remove it */
position: relative;
}
Apologies if this is a really simple thing, I can't seem to get it. Think I need to use clear but it's not working right (or I'm not using it correctly).
Am doing a pretty simple page, floating one image logo left and text on right. Then using a line break to break up image / text (you can see example here: http://transitions-london.co.uk/index.php/testimonials
It looks fine on firefox, but move to safari or chrome and the formatting is shunting some images/text to the right. Also when you scale up or down (cmd +-) the formatting changes.
I think I need to use <div style="clear: both;"> after every <hr /> but when I do nothing happens and the Joomla editor removes the code after saving.
Each testimonials (chunk of logo then text) is currently coded like so:
<div style="float: left;"><img src="images/otherlogos/nationalgrid92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>"Transitions opens up an avenue for us to recruit a diverse graduate workforce. There's an option for recruiting to more experienced roles too. There's a real demand in the UK for highly skilled candidates in cables and tunnels and this presents a real alternative to find international people without the complexities around international recruitment. Some of these people may have experience in their home country that we just don't have here. If the requirements change quickly we can now respond quickly."</p>
<h5 style="text-align: right;">Sharon Goymer, Graduate Resourcing Manager, Development Programmes, National Grid</h5>
<hr />
<div style="float: left;"><img src="images/otherlogos/crossrail92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>“We gained a first-class civil engineer employee as a result of Transitions. The internship and recruitment service and candidate was above our expectations.. The refugee community offers a good untapped market.“</p>
<p> </p>
<p> </p>
<h5 style="text-align: right;">Dawn Barker, Crossrail Head of HR, Crossrail</h5>
<hr />
Would really appreciate the help. I know it's probably very simple.
Cheers, N
Your template already has a class clr you can use. Try adding it to your <hr> element like so:
<hr class="clr">
If that continues to be stripped out by the Joomla WYSIWYG Editor, then add this to one of your Joomla CSS files
hr {clear: both}