I'm having a (probably stupid) problem with floating div. I have each div sized at one or two-thirds of screen width (on wide enough displays).
Where I have a short 67% div floated left then a tall 33% div floated right then a short 67% div floated left, I'd expect the third div lined up immediately underneath the first with the second continuing down to its right, as at http://jsfiddle.net/BluefireAdz/bqdpfv8w/
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
<br />
<br />
<br />
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff; ">
<br />
</div>
However, something (probably in my CSS) is pushing it down so that it only starts at the bottom of the second div, as at http://jsfiddle.net/BluefireAdz/9bho8s5b/ (code made as clean as I can easily make it and still having the problem).
<div class="w67" style="background-color: #aaaa00; ">
<h1>Title</h1>
</div>
<div class="w67" style="background-color: #aa0000; ">
<div class="b3_vplayer">
<div class="embed-container">
<iframe src="http://www.youtube.com/embed/06olHmcJjS0?autoplay=0&rel=0&theme=light" style="border: 0; "></iframe>
</div>
</div>
</div>
<div class="w33" style="background-color: #00aa00; ">
<img src="http://www.killersites.com0killerSites/resources/dot_clear.gif" alt="Image 1" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
<img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" alt="Image 2" style="width: 286px; height: 300px; margin: 1em 0 0 0" />
</div>
<div class="w67" style="background-color: #0000aa; ">
<p>Lorem Ipsum</p>
</div>
Have tried in Edge, IE and Firefox and get the same results.
See my updated fiddle here: http://jsfiddle.net/9bho8s5b/1/
Basically I just brought the floated right div before the other divs.
<div style="padding: 0; margin: 0; border: 0; float: right; width: 33%; background-color: #00aa00; color: #ffffff; ">
<br />
<br />
<br />
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aaaa00; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #aa0000; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 67%; background-color: #0000aa; color: #ffffff;">
<br />
</div>
Update your code in this fiddle
http://jsfiddle.net/9bho8s5b/2/
HTML:
<div style="float:left; width: 67%;">
<div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aaaa00; color: #ffffff; ">
<br />
</div>
<div style="padding: 0; margin: 0; border: 0; float: left; width: 100%; background-color: #aa0000; color: #ffffff; ">
<br />
</div>
</div>
You can wrap your first two div's in another div which is of 67% width and the internal divs which take full width.
You can change up your HTML so that the div that is set to float:right appears first, followed by the 3 float:left.
Here is a fiddle.
Solved it - I wasn't actually floating the w33 div to the right! Have added float: right to the inline style and now it all floats as hoped for!
Related
Elements doesn't align to centre when margin: 0 auto; applied.
See the code here. https://jsfiddle.net/helloworld123/vhhx1o7n/
I have to align the elements in centre of page(.entry-wrap should be aligned to centre of the page) and its children(.entry) should be floated to left.
I have this working to some extent in fiddle https://jsfiddle.net/helloworld123/n8o18ges/ ,but I don't want the elements in third row to be aligned to center.
<div class="entry-wrap">
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
</div>
body {
background: #f8f8f8;
}
.entry-wrap {
width: 500px;
height: auto;
margin: 0 auto;
background: #ccc;
padding: 10px;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
This is what I want to achieve
1.) On .entry, use display: inline-block; instead of float: left;
2.) On .entry-wrap use text-align: center;
https://jsfiddle.net/fe6cmr07/
First of all, all the elements inside entry-wrap are floated, so entry-wrap is collapsing, to fix it, you can add overflow:hidden to it, or use a clearfix solution.
If you want the child elements to be centered, it's just a matter of playing with the width of the wrapping div:
body {
background: #f8f8f8;
}
.entry-wrap {
width: 620px;
margin: 0 auto;
padding: 15px;
background: #ccc;
overflow: hidden;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
fiddle: https://jsfiddle.net/o8aj3hqL/
your block with margin: 0 auto is in the center of <body>. the problem is with the child elements since they are floated and it won't be center aligned unless you use display: inline-block instead of float: left
here is the fiddle https://jsfiddle.net/vhhx1o7n/1/
body {
background: #f8f8f8;
}
.entry-wrap {
width: 618px;
height: 318px;
margin: 0 auto;
background: #ccc;
padding: 10px;
}
.entry {
float: left;
border: 1px solid #f1f1f1;
margin: 2px;
}
<div class="entry-wrap">
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
<div class="entry">
<img src="https://d13yacurqjgara.cloudfront.net/users/43342/screenshots/2772190/dribbble_2016_partb_001_teaser.jpg" alt="Shot title" />
</div>
</div>
Here is the code I am using so far. I have 6 images that I am trying to arrange and make responsive as well.
Idea is like this
image -blank space - image
image -----blank space -----image
image -blank space - image
When I squeeze the page they do not end up stacked uniformly on top of each other. The spaces need to go away so all I have is 6 images on top of each other. CSS below followed by html
.row:after {
content: "";
clear: both;
display: table;
}
/** North Scottsdale */
.nsdl {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break1 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** Scottsdale */
.sdl {
float: left;
margin: 0px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** Tempe */
.tmpe {
float: left;
margin: 0 35px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break2 */
.break2 {
float: left;
margin: 10px;
padding: 10px;
width: 475px;
height: 200px;
border: 3px solid white;
}
/** Downtown */
.dtown {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** West Side */
.wside {
float: left;
margin: 0 175px;
padding: 0 0px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
/** break1 */
.break3 {
float: left;
margin: 0px;
padding: 0px;
width: 95px;
height: 200px;
border: 3px solid white;
}
/** UPTOWN */
.utown {
float: left;
margin: 0 120px;
padding: 10 10px;
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("/images/dphotos/test2a.png");
}
<div class="w3-container">
<div class="row">
<div class="left">
<div class="nsdl" style="text-align: center;">
<h2> NORTH SCOTTSDALE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="sdl" style="text-align: center;">
<h2>SCOTTSDALE</h2>
</div>
</div>
</div>
<div class="row">
<div class="left">
<div class="tmpe" style="text-align: center;">
<h2>TEMPE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="dtown" style="text-align: center;">
<h2>DOWNTOWN</h2>
</div>
</div>
<div class="left">
<div class="wside" style="text-align: center;">
<h2>WEST SIDE</h2>
</div>
</div>
<div class="center"> </div>
<div class="right">
<div class="utown" style="text-align: center;">
<h2>UPTOWN</h2>
</div>
</div>
</div>
</div>
I would suggest looking at a number of frameworks like Bootstrap, Skeleton and Zurb Foundation and use their CSS grid components. Look into how they control the size of various page regions with media queries using a mobile first approach.
You can definitely roll your own solution too. Here's an example.
<div class="img-group">
<div class="img-holder">
<img src="http://placehold.it/300x300?text=1">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=2">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=3">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=4">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=5">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=6">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=7">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=8">
</div>
<div class="img-holder">
<img src="http://placehold.it/300x300?text=9">
</div>
</div>
.img-group img {
display: block;
max-width: 100%;
}
.img-holder {
float: left;
width: 50%;
}
#media ( min-width: 448px ) {
.img-holder {
width: 33.333%;
padding: 0.75%;
}
}
#media ( min-width: 779px ) {
.img-holder {
box-sizing: border-box;
width: 25%;
padding: 2%;
}
}
Demo JSFiddle.
First you make your images responsive. The simplest version of doing so is setting them to display: block; and max-width: 100%;. Setting the max width means they'll try to take up their parent element's width as long as they don't exceed their own intrinsic width. For example, if the parent element is 700px wide and the image is 600px wide, it won't stretch to fit the 700px of space. It will stop at 600px.
Now you place your images in container elements that you'll control with media queries. Use percentage widths (i.e. width: 25%; ) so they stay nice and fluid.
You might be wondering what box-sizing: border-box; does. It says that padding should be included as a part of your width definition. Normally if you have width: 25%; padding: 1%; the total width of your element would be 27% as 1% + 25% + 1% = 27%.
[This is what I want to do: ](
https://developers.google.com/maps/documentation/javascript/?csw=1#Custom_Controls)
What is the floating window called? (which says base maps, with drop down list.)
It's not over lay, nor infowindow, what is it?
It's a div, which they've styled to float over the map pane. If you inspect the element you can see:
<div class="open visible" id="panel">
<div class="mtam-title">
<div id="panel-title">Base Maps</div>
</div>
<div id="panel-body">
<div class="banner basemaps-banner">
<div class="g-plusbtn">
<div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 24px; height: 15px;">
<iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&annotation=none&size=small&origin=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&url=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com%2Fdemos%2Fbasemaps&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.tbkZX74SaQs.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOYzemCn6PkYhgzRa3g2KtXX0dBpg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1433919884595&parent=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&pfname=&rpctoken=31017501" name="I0_1433919884595" id="I0_1433919884595" vspace="0" tabindex="0" style="position: static; top: 0px; width: 24px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 15px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" width="100%" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="section section-text">
<p>
For the last decade, we've obsessed over building great maps—maps that are comprehensive, accurate, and easy to use.
</p>
</div>
<div class="section">
<div class="tabs"><a class="active" href="#">Base Maps</a>Styled Maps</div>
</div>
<div class="">
<div>
<h2>Go Further</h2>
<ul style="display: block;">
<li><a class="active" href="/demos/basemaps/new-york">New York</a></li>
<li>Hong Kong</li>
<li>Search</li>
</ul>
<ul style="display: none;">
<li>Sydney</li>
<li>Tokyo</li>
<li>San Francisco</li>
</ul>
</div>
</div>
</div>
</div>
and also:
#panel.visible {
right: 20px;
}
#panel.open {
top: 20px;
}
.section-demos #panel {
display: block;
}
#panel {
position: absolute;
z-index: 1000;
top: 0px;
right: -500px;
width: 270px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 5px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.61);
display: none;
}
I am trying to align three images in a header div. I need one image on the left - once centered - and an image on the right. I have the image on the left and the centered image in place. However, I cannot get the image I need on the right to display on the right of the centered image. If I float:left the centered image it messes up my centered image in various browsers. The image I want on the right displays on the left of the centered image. How do I get it on the right side of the centered image? Thank you very much.
Here is my code:
HTML:
<div class="header">
<div class="headerLeft">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="logo85.jpg"
width="485"
height="93"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div> <!-- closing tag of header -->
CSS:
.header{
width: 100%;
height: 115px;
background-color: #0B0B3B;
margin-bottom: -15px;
}
.headerLeft{
float: left;
width: 105px;
height: 115px;
}
.headerCenter{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 485px;
height: 93px;
}
.headerRight{
float: left;
text-align: right;
margin-left: 15px;
width: 105px;
height: 115px;
}
Quick answer :
*
{
box-sizing: border-box;
}
header
{
background: grey;
color: white;
padding: 1em;
position: relative;
height: 5em;
width: 100;
}
img
{
display: block;
height: 3em;
margin: auto;
}
img.right
{
position: absolute;
right: 1em;
top: 1em;
}
img.left
{
left: 1em;
position: absolute;
top: 1em;
}
<header>
<img src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" class="left" />
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRBzTbPH8FRYR0HRqTmXnwSO4GgLbFO6rpALpwynKRr4SM_nTCywQQO6qvDcg" alt="" class="center" />
<img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="" class="right" />
</header>
To avoid using position: absolute;, I'd recommend using calc to help out, and wrapping the .headerCenter in .headerCenterWrapper as I have below.
CSS:
.headerLeft {
width: 105px;
height: 115px;
display: inline-block;
}
.headerCenterWrapper {
width: calc(100% - 220px); /* Using a number slightly more than the sum of the side images' widths (210 px) to be safe */
height: 115px;
display: inline-block;
text-align: center;
}
.headerCenter {
width: 50px;
height: 115px;
display: inline-block;
}
.headerRight {
width: 105px;
height: 115px;
display: inline-block;
}
And the HTML:
<header class="header">
<img src="" alt="" class="headerLeft"/>
<div class="headerCenterWrapper">
<img src="" alt="" class="headerCenter" />
</div>
<img src="" alt="" class="headerRight" />
</header>
css
.headerLeft{
float: left;
width: 33.33%;
height: 115px;
}
.headerCenter{
margin-left: auto;
margin-right: auto;
width: 33.33%;
height: 115px;
float:left;
text-align:center;
}
.headerRight{
float: right;
width: 33.33%;
height: 115px;
text-align:right;
}
html
<div class="header">
<div class="headerLeft">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div>
Hi friends i am trying to make my repeater look like the img i have attached . I have achieved till the line Total cover but the 50% total cover line giving me headache in alignment. Can someone please guide me on this
<asp:Repeater ID="TreeRepeater" runat="server" DataSourceID="TreeSource" OnItemDataBound="TreeRepeater_ItemDataBound">
<ItemTemplate>
<div>
<div style="float: left; width: 15px; text-align: right;"><%# Container.ItemIndex + 1 %>.</div>
<div style="float: left; width: 230px; border-bottom: 1px solid black;margin-right:5px"><%# Eval("ScientificName") + ", " + Eval("CommonName")%></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"><%# string.Format("{0:0.##}",Eval("PercentageCover")) %></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px; vertical-align:text-bottom"><asp:Image ID="TreeDominantImg" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" Visible='<%# ((Eval("Dominant") == DBNull.Value)?(short)0:(short)Eval("Dominant")) == 1 ? true : false %>' /></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black;"><%# Eval("Indicator")%></div>
<div style="clear: both;"></div>
</div>
</ItemTemplate>
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"></div>
<div style="float: left; width: 45px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server"/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="display:inline-block; width: 100px;"></div>
<div style="display:inline-block;width:120px;">50% of total cover:</div>
<div style="display:inline-block;width:40px;border-bottom: 1px solid black;"><asp:Label ID="Label6" runat="server"/></span></div>
<div style="display:inline-block;width:120px;">20% of total cover:</div>
</div>
</FooterTemplate>
I prefer to use display: inline-block rather than float: left because if you use float: left, it will exit the current flow of the element. You can change the div in ItemTemplate to this (Just copy the style, not the entire code)
<div>
<div style="display: inline-block; width: 15px; text-align: right;">1.</div>
<div style="display: inline-block; width: 230px; border-bottom: 1px solid black;margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px;"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black;"></div>
<div style="clear: both;"></div>
</div>
and the FooterTemplate to this (Again just copy the style)
<div>
<div style="display: inline-block; width: 254px;"></div>
<div style="display: inline-block; width: 45px; text-align: center;border-bottom: 1px solid black;"></div>
<div style="display: inline-block;">= Total Cover</div>
</div>
<div>
<div style="display:inline-block; width: 44px;"></div>
<div style="display:inline-block;width:130px;">50% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
<div style="display:inline-block;width:130px;">20% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
</div>
then it will results just like in this DEMO
Note: If any of the words inside footer wrapped to a new line, just edit the width that you use.
try the following:
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"> </div>
<div style="float: left; width: 45px; height:15px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server" Text=" "/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="float: left; width: 60px;"> </div>
<div style="float: left;">50% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label6" runat="server" Text=" "/></span></div>
<div style="float: left;"> </div>
<div style="float: left;">20% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label1" runat="server" Text=" "/></span></div>
<div style="clear: both;"></div>
</div>
</FooterTemplate>