I have list of data which i am binding using Knockoutjs,Now comes for CSS part, i need to align it horizontal.I am not much good in CSS.I have three images and username so i want to align it in Horizontal for my Mobile app below is my code kindly suggest me.
<ul style="list-style: none;" data-role="listview" id="hierarchical-listview" data-bind="foreach:UserProfile">
<li style="background-color:#FFF">
<div style="width:100%;">
<div style="width:50%">
<div style="padding-left:20px;padding-top:10px">
<span data-bind="text:UserId" style="display:none;"></span>
<span data-bind="text:Username"></span>
<img class="profileimage" data-bind="attr: { src: UserImage }" style="width:60px;height:60px;float:left!important;" />
<img data-bind="attr: { src: UserProfileImage }" style="width:30px;height:30px;float:left!important;" />
</div>
</div>
<div style="width:50%;float:left;margin: 0px -20px;">
<img data-bind="attr: { src: UserPostedImage }" style="width:30px;height:30px;float:left!important;" />
<input type="checkbox" class="listcheckbox km-widget km-icon km-check" data-bind="checked:UserSelected" />
</div>
</div>
</div>
</li>
</ul>
Remove all the float from your img containers and the parent div containers.
Provide display: inline-block to all and then vertical-align: middle.
So your img elements should look something like:
<img class="profileimage" data-bind="attr: { src: UserImage }" style = "width:60px; height:60px; display: inline-block; vertical-align: middle;" />
Related
I have problem to match the buttons to iphone 4 and iphone 5 only.
all the other platform design phones looks good and responsive but only iphone 4 & 5 little strange.
as you can see in nexus, galaxy and iphone 6 it looks good
but in iphone 4 i need to scroll down and the forgot password and create account is one on the other.
<div class="popup popup-login modal-{{popupLogin}}" style="display: block;background:transparent">
<div class="content-block" >
<div class="login-view-box page page-login-wrapper" style="background:transparent;background:#009688">
<div class="text-center" >
<div class="logo sd" ></div>
<div class="company-text">company name</div>
</div>
<div class="list login-form-box">
<form name="loginForm"
novalidate ="novalidate"
ng-submit="loginForm.$valid && performLogin()" style="margin:20px auto;">
<label class="item item-input" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
fill="#000000"></path>
</svg>
<input type="email" placeholder="Email" name="email" ng-model="email" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
<div ng-message="email">{{ClientMessages.InvalidEmailInput}}</div>
</div>
<br />
<label class="item item-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"
fill="#000000"></path>
</svg>
<input type="password" placeholder="Password" name="password" ng-model="password" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
</div>
<button type="submit"
class="button button-block button-positive"
id="login-button"
ng-click="loginSubmit()"
<i class="icon ion-loading-c"></i>
<span>Sign In</span>
</button>
<div class="item item-input list-block" style="background-color:transparent;border:0;margin-top:8px;" ng-click="toggleStayLoggedCheck();" >
<label class="label-checkbox">
<input type="checkbox" name="stayLoggedCheckbox" ng-model="stayLoggedCheckbox" value="StayLogged" >
<div class="item-media" style="padding-left:20%">
<i class="icon icon-form-checkbox" style="border-radius:0"></i>
<span style="padding-left:10px;color:white">Stay Logged In</span>
</div>
</label>
</div>
</form>
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
</div>
</div>
</div>
the problem area
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o SAMGray-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
Has your class .footer-link a position: absolute and bottom: 0 properties or something ?
I'd suggest to create a media query like below, to target iphones 4 & 5.
#media only screen and (max-width: 320px) {
/* your iphone 4 & 5 styles */
}
Then, switch your .footer-link class to position: relative (and maybe float: left, depending on your other blocks' float).
The final code should looks like this:
#media only screen and (max-width: 320px) {
.footer-link {
position: relative;
/* float: left; if needed */
}
}
This should position the "forgot password" and fab below the "create account" button and in the meantime apply that margin-top: 20px which is useless in absolute positionning.
Your view will have to be scrolled to see the "forgot password" link though. So you might want to add more styles to the media query in order to reduce some margins, paddings or font-sizes and get the desired view as a result.
However, in this layout your fab link will be messed up. As its absolute positionning would be relative to the .footer-link. I suggest you move it outside of the footer (right before the </body> tag, for example).
Hope this helps!
I'd try switching the position properties. When positioning something absolute, the parent should be "position:relative". When you were resizing in Chrome's mobile spoofer, it was pushing that absolute positioned item up and into the other content. It isn't mimicking any other specs when you're spoofing the view, just the view dimensions. Hope this helps!
<div class="text-center crt" style="position: relative;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position: absolute;"></span>
</div>
body{
border: 3px red solid;
background-color: green !important;
}
For the convinence of debug,I set body as above.
And the result is shown in the screenshot as below:
See that extra green space at the very bottom? I just can't seem to get rid of it.
The margin of the body of course is all 0 and overflow: hidden is not helping either.
Besides, all of the elements inside the body share the same height.
Alright ,so the html for this page is as below:
<link href="http://news.12reads.cn/style.css" rel="stylesheet"/>
<body class="page page-id-2109 page-template page-template-start page-template-start-php logged-in d2 g2 p2 c2 elegant">
<div id="global" class="global">
<div class="pusher">
<!-- <section id="title"></section> 隐藏课程学习页的page title -->
<!-- 内容区开始 -->
<section id="content" style="background-color: rgb(240, 240, 244); height: 100%; padding-bottom: 698px;">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="unit_wrap ">
<div id="unit_content" class="unit_content">
<div id="unit" class="unit_title" data-unit="2618">
<div class="instructor">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span><strong>讲师</strong><br>12reads</span>
</div><i class="icon-printer-1"></i><span><i class="icon-clock"></i> 49 分钟</span> <br><h1 class="well well-sm" style="font-size: 18px;">管理思维的演变</h1>
</div>
<div class="main_unit_content unit_class"><div id="a1"><object pluginspage="http://www.macromedia.com/go/getflashplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" id="ckplayer_a1" name="ckplayer_a1" align="middle" height="400" width="100%"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#FFF"><param name="wmode" value="transparent"><param name="movie" value="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf"><param name="flashvars" value="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&c=0"><embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf" flashvars="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&c=0" name="ckplayer_a1" id="ckplayer_a1" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="400" width="100%"></object></div>
<script type="text/javascript" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:"http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4",
c:0
};
var params={bgcolor:"#FFF",allowFullScreen:true,allowScriptAccess:"always",wmode:"transparent"};
var video=["http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4->video/mp4"];
CKobject.embed("http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf","a1","ckplayer_a1","100%","400",false,flashvars,video,params);
</script>
</div> <div class="unit_prevnext"><div class="col-md-3">上一课时</div><div class="col-md-6"></div><div class="col-md-3"></div></div> </div>
<input id="hash" name="hash" value="bf905d9c31" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden"><input id="course_id" name="course" value="2605" type="hidden"> <div id="ajaxloader" class="disabled"></div>
<div class="side_comments"><a id="all_comments_link" data-href="">查看全部</a>
<ul class="main_comments">
<li class="hide">
<div class="note">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> 12reads <div class="unit_comment_content"></div>
<ul class="actions">
<li><a class="tip edit_unit_comment" title="" data-original-title="Edit"><i class="icon-pen-alt2"></i></a></li>
<li><a class="tip public_unit_comment" title="" data-original-title="Make Public"><i class="icon-fontawesome-webfont-3"></i></a></li>
<li><a class="tip private_unit_comment" title="" data-original-title="Make Private"><i class="icon-fontawesome-webfont-4"></i></a></li>
<li><a class="tip reply_unit_comment" title="" data-original-title="Reply"><i class="icon-curved-arrow"></i></a></li>
<li><a class="tip instructor_reply_unit_comment" title="" data-original-title="Request Instructor reply"><i class="icon-forward-2"></i></a></li>
<li><a data-href="#" class="popup_unit_comment" title="Open in Popup" target="_blank"><i class="icon-windows-2"></i></a></li>
<li><a class="tip remove_unit_comment" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
</ul>
</div>
</li>
</ul>
<a class="add-comment">Add a Note</a>
<div class="comment-form">
<img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span>YOU</span> <article class="live-edit" data-model="article" data-id="1" data-url="/articles">
<div class="new_side_comment" data-editable="true" data-name="content" data-text-options="true" contenteditable="true">
添加评论 </div>
</article>
<ul class="actions">
<li><a class="post_unit_comment tip" title="" data-original-title="发布"><i class="icon-fontawesome-webfont-4"></i></a></li>
<li><a class="remove_side_comment tip" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="course_time">
<strong>剩余时间 : <span>0 Days</span></strong> </div>
<div class="progress course_progressbar" data-increase-unit="50" data-value="50.00">
<div class="bar animate cssanim stretchRight load" style="width: 50.00%;"><span>50.00%</span></div>
</div><div class="course_timeline ">
<ul><li id="unit2609" class="unit_line done"><span></span> <a class="unit" data-unit="2609">管理思维导论</a></li><li id="unit2618" class="unit_line active done"><span></span> <a class="unit" data-unit="2618">管理思维的演变</a></li></ul></div> <div class="more_course">
返回课程
<form action="http://peixun:8888/course/%e7%ae%a1%e7%90%86%e6%80%9d%e7%bb%b4/" method="post">
<input name="review_course" class="review_course unit_button full button" value="评价课程" type="submit"><input name="submit_course" class="review_course unit_button full button" value="完成课程" type="submit">
<input id="review" name="review" value="e9c8949274" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden"> </form>
</div>
</div>
</div>
</div>
</section>
</div><!-- END PUSHER -->
</div><!-- END MAIN -->
<span class="text-options" style="top: -999px; left: -999px;"><button class="url-button">U</button><span class="input-text"><input name="liveedit-url" type="text"></span><button class="bold-button">B</button><button class="italic-button">I</button><button class="strikethrough-button">ABC</button><button class="unorderedlist-button">L</button></span></body>
This is a simple common mistake. the body element has a default value of 8px on margin property. What you gotta do is
html, body {
height: 100%;
width: 100%;
margin: 0;
}
The 100% width and height are optional, I just always use that snippet to fill up the whole screen with body.
I am having that problem with Bootstrap. Looks like the culprit is the ROW class. I solved it by setting the with of the row to 100%:
<div class="row" style="width:100%">
I tested with your code, not in a jsfiddle and I added this:
.page {
height: 100%;
margin: 0;
}
html {
position: relative;
height: 100%;
}
If you can't set html properties, on .page add min-height: 100vh. vh is viewport units, this case horizontal.
.page {
height: 100%;
margin: 0;
min-height: 100vh;
}
Given the following example, what would be a good approach to position the Search button in line with the date input controls?
I gave it a shot with Bootstrap (2 rows, 3 columns) but the layout should stick to the left and keep the 3 logical columns together. And maybe there's an easier solution I am overlooking.
JS Bin HTML
Note: based on the simplified output from Telerik's Kendo UI combined with ASP.NET MVC.
Flexbox requires IE10+
Here is the solution that works everywhere and won't break bootstrap's responsiveness http://output.jsbin.com/ladezahija/1/
Idea is to apply to elements (blocks with date and search button) next rule:
.element {
display: inline-block;
vertical-align: bottom;
}
In an example I had to use float: none to redefine previously added property by bootstrap.
Also make sure you add a separate class for container and inner elements you work on.
I would go with CSS Flex.
using this CSS would align them for you. (you will need some vendor prefixes)
$("#datepicker").kendoDatePicker();
$("#grid").kendoGrid({
dataSource: [
{ foo: "foo", bar: "bar" }
]
});
.container-fluid {
display: flex;
justify-content: space-around;
}
.container-fluid > div {
align-self: flex-end;
}
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="container-fluid">
<div style="margin: 20px; float: left;">
<h4>
<label for="StartDate">From</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="startDate" class="k-input" id="startDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="startDate_dateview" style="width: 100%;" type="text" value="1-11-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<h4>
<label for="EndDate">To</label>
</h4>
<span class="k-widget k-datepicker k-header">
<span class="k-picker-wrap k-state-default">
<input name="endDate" class="k-input" id="endDate" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="endDate_dateview" style="width: 100%;" type="text" value="24-12-2015" data-val="true" data-role="datepicker" />
<span class="k-select" role="button" unselectable="on">
<span class="k-icon k-i-calendar" unselectable="on">select</span>
</span>
</span>
</span>
</div>
<div style="margin: 20px; float: left;">
<button tabindex="0" class="k-button" id="applyFilters" role="button" aria-disabled="false" data-role="button">Search</button>
</div>
</div>
You didn't used bootstrap properly. Anyway I have two solution.
First Solution:=> Add a blank h4 <h4> </h4> into last div.
Second Solution:=> Use margin-top:60px to k-button.
I have the following html structure:
<div class="ms-PostFooter">
<span style="">
<span style="" class="s4-clust">
<a href="#" style="">
<img src="" alt="" style="l" title="" class="imglink" longDesc="" />
</a>
</span>
</span>
<span style="">
<span class="s4-clust">
<a href="#" style="">
<img src="" alt="" style="" title="" class="imglink" longDesc="" />
</a>
</span>
</span>
<span style="">
<span class="s4-clust">
<a href="#" style="">
<img src="" alt="" style="" title="Number of Comments" class="imglink" longDesc="" />
</a>
</span>
</span>
</div>
In css how would I select the third tag in order to hide the image with title "Number of Comments"?
.ms-PostFooter span::nth-child(3) img {
display: none;
}
or this also works:
img[title="Number of Comments"] {
display: none;
}
however these rely on your markup / content. the best way would be - generate a specific class on that image or its container, server-side (if you can)
One possibility if your title is unique:
[title="Number of Comments"]
{
display:none;
}
You can use the following:
div :last-child span .imglink{
display:none;
}
jsfiddle: http://jsfiddle.net/kGThS/1/
This may be more specific:
.ms-PostFooter :last-child span .imglink{
display:none;
}
jsfiddle: http://jsfiddle.net/kGThS/3/
To hide the entire last span/link as per your comment below use the following:
.ms-PostFooter :last-child span{
display:none;
}
Somehow through css sharepoint was not allowing me to use any of the selectors mentioned here through css to get rid of the specif tag containing the link and image to be removed so I decided to use jquery instead which did the trick as follows:
$( document ).ready(function() {
$('DIV.ms-PostFooter span:nth-child(3)').css('display', 'none');
$('DIV.ms-PostFooter span:nth-child(4)').css('display', 'none');
});
Thanks for all the assistance.
Im trying to get descriptions next to a 485 wide picture, I did it on my ways, but when trying to add a new line with the same picture and description something like this:
(source: gyazo.com)
But when I copy and paste the exact same line of code and add margin-top to that div, or even <br /> it won't make any space between them, that's how it is looking now:
(source: gyazo.com)
What is causing that? very interesting..
I am using twitter bootstrap framework.
Code:
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
</div>
</div>
</div>
<br />
</body>
CSS
.name-col {
color: #d3d3d3;
}
.title-col {
color: #b2b2b2;
float: left;
position: relative;
top: 7px;
}
.field2 {
margin-top: 50px;
}
.works {
margin-top: 10%;
}
.examplefloat {
float: left;
border: solid 1px #000;
margin-left: 50px;
}
.tag_webdesign {
background-image: url("../img/web-design.png");
width: 89px;
height: 37px;
float: left;
}
.work1 {
float: left;
}
Live preview:
http://justxp.plutohost.net/themetheory/portfolio.html
What is causing that problem?
Thanks
Add this rule to your CSS
.field1 {
margin-bottom: 30px;
overflow: hidden;
}
This will clear the floated elements in your .field1 container and apply a margin of 30px to its bottom.
Find the end </div> that pairs with the <div class="works">
Add above that end </div>:
<div style="clear:both"></div>
Should look like this.................
<body>
<div class="container">
<div class="works">
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
<br />
<div class="field1">
<div class="work1">
<span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
<span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming <br />websites are always fun!</a>
<br />
<br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
</div>
<img class="examplefloat" src="img/p1.png"/>
<div style="clear:both></div> //MY ADDITION
</div>
</div>
</div>
<br />
</body>
What you want to do is use a clearfix solution on your .field1 divs: https://stackoverflow.com/a/1633170/1778054
In essence, add this to your CSS:
/* For modern browsers */
.field1:before,
.field1:after {
content:"";
display:table;
}
.field1:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.field1 {
zoom:1;
}
If you take the float:left; off the .examplefloat (used on the images) class it will fix the margin issue.