can anyone tell me why #contHolder div doesn't get pushed up to the first row?
replacing the tables elements with "any text content" and everything is aligned properly.
<div id="footerWrapper"style="display: block; width:100%;">
<div id="firstCol" style="float:left; width: 30%;">
<div id="footerProjectTitle" style="float: left; width: 100%; background-color:red;">title</div>
<div style="clear:both"></div>
<div id="contHolder"style="float: left; width: 30%; background-color: #ffc0cb;">
<table>
</table>
</div>
</div>
<div id="secondCol" style="float:left; width: 30%;">
<div id="linkHolder"style="float: left; width: 100%; background-color: #f0ffff;">
<table>
</table>
</div>
</div>
</div>
here's a fiddle
http://jsfiddle.net/KzJN3/
updated fiddle:
http://jsfiddle.net/KzJN3/2/
thanks!
The problem is here:
<div class="noborder" style="clear: both; width: 100%; height: 0px; line-height: 0px; font-size: 0px;"> </div>
You told it to clear:both so any floats after this element will start on a new row.
Floats are a difficult topic, see: http://css-tricks.com/all-about-floats/ for some good information on them and how they work.
Related
I'm trying to vertically center certain items within a table cell. I've tried most solutions on stackoverflow and several other sites without any luck.
In this cell, the image is stuck at the top of the table cell, while the text is properly centered vertically:
<tr>
<td class='sidebar-middle'> <!--sets a left and right border-->
<a target="_blank" href="data/Standards.pdf">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 34%; text-align: center;height: 100%;'>
<img src='images/logo.jpg' alt='Standards' style='width: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Local Facility Standards to be Followed</p>
</div>
</a>
</td>
</tr>
However, using the same method, this DOES seem to work:
<tr>
<td class='sidebar-bottom'> <!--sets a left, right, and bottom border-->
<a target="_blank" href="Policies.html">
<div style='width: 100%;text-align: center;overflow: hidden;'>
<div style='float: left;width: 35%; text-align: center;height: 100%;'>
<img src='images/patch.png' alt='Policies' style='height: 80px;vertical-align: middle;'/>
</div>
<p style='float: right; vertical-align: middle;width: 64%;'>Policies</p>
</div>
</a>
</td>
In the first (frustrating) example, the image is 112 pixels in height, scaled down to 30. In the second (working) example, the image is 122 pixels in height, scaled down to 80. I suspect that image height has something to do with it, but can't get any further in resolving the problem.
While assigning classes to the elements I didn't see a change. When I replaced the <tr> and <td> with <div> and <section> it didn't change. It just works like the way you wanted it to. There's no style info provided for classes, .sidebar-middle and .sidebar-bottom so that might be your problem (or the rest of the code you neglected to post). Note: I didn't need to modify the div.C or the <section>s I added, so table components may have not been needed and the floats were sufficient.
When using inline styling heavily, your HTML gets cluttered and there's no easy way of fixing it should you have many lines of that coding disaster. As Paulie_D and hidanielle already stated, your vertical-align does not function on floated elements, and HTML table -layouts are so 90s. In the 21st century we use table-* CSS properties.
SNIPPET
.A {
width: 100%;
text-align: center;
overflow: hidden;
}
.B {
float: left;
width: 34%;
text-align: center;
height: 100%;
}
.img {
width: 80px;
height: 80px;
}
.note {
float: right;
width: 64%;
}
<div class='C'>
<section class='sidebar-middle'>
<a target="_blank" href="http://www.orimi.com/pdf-test.pdf">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img' />
</div>
<p class='note'>Local Facility Standards to be Followed</p>
</div>
</a>
</section>
</div>
<div class='C'>
<section class='sidebar-bottom'>
<a target="_blank" href="http://www.example.com">
<div class='A'>
<div class='B'>
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png' alt='Lenna' class='img'>
</div>
<p class='note'>Policies</p>
</div>
</a>
</section>
</div>
Instead of floats, use CSS Tables (since you started with an actual table for layout).
* {
margin: 0;
padding: 0;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
overflow: hidden;
}
.left {
display: table-cell;
width: 34%;
text-align: center;
background: pink;
}
img {
width: 80px;
}
.right {
display: table-cell;
width: 64%;
vertical-align: middle;
background: lightblue;
}
<a target="_blank" href="data/Standards.pdf">
<div class="inner">
<div class="left">
<img src='http://www.fillmurray.com/80/80' alt='Standards' />
</div>
<p class="right">Local Facility Standards to be Followed</p>
</div>
</a>
I am having some difficulty with some html code (I have never done html programming of any significance) where I am trying to do something fairly simple. Actually I broke it down to the simplest form for now. So I have three blocks on top of each other. The first block at the very top has three sub boxes within it horizontally. I fixed the height of this block at 250px since my text fits into it. However my second block (Center) overlaps with the Top div. How do I specify that the center div start after the Top div? I want it to display a few pixels below the Top div.
<div id="Report" style="height: auto">
<div id="Top" style="width:inherit; height:250px">
<div id="First" class="TopMostLeft" >
<span style="font-family:Calibri; font-size:small">Info</span>
<table style="width:100%" > ... </table>
<div id="Second" class="TopMostCenter">
<span style="font-family:Calibri; font-size:small">Info2</span>
<div id="Third" class="TopMostRight">
<div id="About" class="TopRightDiv">
<table style="width:100%">
</div>
<div id="Center" style="border:solid; border-width:2px; border-color:lightgray; padding:4px; margin:10px">
<div id="Bottom" style="border-width:2px;border-width:2px; border-color:lightgray; padding:4px; margin:10px">
</div>
Here's what you need. Create a stylesheet so we can style it much better.
Working Fiddle: https://jsfiddle.net/v9jgj7n3/
I created your layout. This is how I understand what you need.
HTML
<div id="Report">
<div id="Top">
<div id="First" class="TopMostLeft" ></div>
<div id="Second" class="TopMostCenter"></div>
<div id="Third" class="TopMostRight"></div>
</div>
<div id="Center"></div>
<div id="Bottom"></div>
</div>
CSS
#Top {
width: 100%;
display: flex;
height: 250px;
}
#Top #First {
width: 10%;
background: red;
}
#Top #Second {
width: 40%;
background: blue;
}
#Top #Third {
width: 50%;
background: yellow;
}
#Center {
height: 200px;
width: 100%;
background: gray;
}
#Bottom {
height: 80px;
width: 100%;
background: black;
}
Edit the width and height to your desired value. This is how it will work
Also, I notice that you didn't close the child element of Top. You must always close DIV, so the HTML code will run well. It breaks your code.
Hope it helps. Cheers! Good Morning from Philippines.
I would like to know if it's possibile to trasform a web page like this:
to this:
?
Some code used, under development, to obtain first image:
/** CSS **/
div.Testata35, div.Testata25, div.Testata70Inner, div.Testata29Inner, div.Testata15Inner {
background-color: #C0C0C0;
float: left;
}
div.Testata35, div.Testata25 {
margin-bottom: 0.2%;
margin-right: 1%;
margin-top: 0.2%;
padding-bottom: 0.2%;
padding-left: 1%;
padding-top: 0.2%;
}
div.Testata35 {
width: 35.5%;
}
div.Testata25 {
width: 23%;
}
div.Valore35, div.Valore25 {
float: left;
margin-top: 0.2%;
overflow: auto;
padding-bottom: 0.2%;
padding-left: 1%;
padding-top: 0.2%;
}
div.Valore35 {
margin-right: 2.5%;
width: 34%;
}
div.Valore25 {
margin-right: 1%;
width: 23%;
}
<!-- HTML -->
<div class="ClrOvFlw">
<div class="PrimaSx">
<div class="ClrOvFlw">
<div id="T1" class="Testata35">Modello</div>
<div id="T1A" class="Testata35">Linea</div>
<div id="T2" class="Testata25A">
<div style="clear: left; float: left; width: 70%;">Standard</div>
<div style="clear: right; float: right; width: 20%; z-index: 1; overflow: auto;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa">
</div>
</div>
<div class="ClrOvFlw">
<div id="V1" class="Valore35">BELLARIA</div>
<div id="V1A" class="Valore35">MODULAR</div>
<div id="V2" class="Valore25A">EN ISO 20345:2011</div>
</div>
</div>
<div class="Valore25B">
</div>
</div>
<div class="ClrOvFlw">
<div id="T3" class="Testata35">Codice Articolo</div>
<div id="T4" class="Testata35">Protezione</div>
<div id="T5" class="Testata25">Disponibilità a Magazzino</div>
</div>
<div class="ClrOvFlw">
<div id="V3" class="Valore35">83297-07LL</div>
<div id="V4" class="Valore35">S1P SRC</div>
<div id="V5" class="Valore25">
<img id="V5Img" src="FotoMagazzino\maga2-ITA.jpg" alt="Disponibilità">
</div>
</div>
As you can see, I've tried some stuff to achieve the result shown in the second image but with no success.
As side note: I'm not a professional HTML/CSS developer so my "code" is not written as the best practice hints.
EDIT:
As suggested by many of you, I've update my code in this way:
<div class="ClrOvFlw">
<div id="T1" class="Testata35">Modello</div>
<div id="T1A" class="Testata35">Linea</div>
<div id="T2" class="Testata25A">
<div style="float: left; clear: left;">Standard</div>
<div class="Valore25B" style="float: right; clear: right; position: relative;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; display : block; width: 100%; height: 100%;">
</div>
</div>
</div>
Same CSS as above. My results:
EDIT 2:
following suggestions of Fils I've updated my code as follows:
<div id="T2" class="Testata25A">
<div style=" clear: left; float: left;">Standard</div>
<div class="Valore25B" style="position: relative; overflow: auto;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; right: 0px;overflow: visible; height: 100px;">
</div>
</div>
getting this result:
I guess that I'm doing something wrong in following your hints folks.
You could use position:absolute; on that image if you can gurantee that there is always enough space that the whole image will be displayed:
div#V25BImg{
display:block;
position:absolute;
width:[WIDTH]px;
height:[HEIGHT]px;
}
Also you might need to add position:relative; on the parent of the image to ensure that the absolute positioned element will be placed on the correct part of your page.
Set the image holder to position absolute:
This is untested but should give you an idea
<div style="position: absolute; top: 0; right: 0; width: 20%; z-index: 1; overflow: auto;">
<img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa">
</div>
If you position your img absolutely, it will ignore wrapping.
div #V5 img {
position:absolute;
right:0px;
}
Maybe you can do by adding position: relative; in the div wrapping the image, and adding
position: absolute;
top: 25px;
margin-left: 10px;
to the image. Your code should look like this,
<div style="width: 20%;position: relative;">
<img id="V25BImg" src="logo.png" alt="Marchio Normativa" data-pin-nopin="true" style="position: absolute;top: 25px; margin-left: 10px;
">
</div>
check this out
https://jsfiddle.net/1w772kgg/1/
If you need a correct solution, do not use absolute positioning unless absolutely necessary. A floating element can be floating out from its parent container, if:
parent is overflow:auto, and
no relevant clearing object is placed after the element (same-side CSS clear, too wide line, overflow:hidden block element etc.)
See float rules here.
Try provide this conditions.
I'm tring to create two horizontal bars like the below example using only html and css. I'm using the following code:
<div style="height: 150px;">
<div style="width: 55px;float:left;">
<div>340.8</div>
<div style="background-color:#95111d; height: 75px;">
</div>
</div>
<div style="width:55px;float:left">
<div>340.8</div>
<div style="background-color:#9e9e9e; height: 115px;">
</div>
</div>
<br style="clear: both" />
</div>
The problem with this is both bars are sitting at the top of their containing div and not at the bottom so you get the 2nd below images effect.
I have some code that will be generating the height of these bars so I can't just add top padding/margin to push them into position. Is there any way to do this without resorting to javascript to calculate a margin and bottom align them?
Here is the CSS and markup that should do the work (no absolute positioning used)-
DEMO
HTML:
<div id="wraper">
<div id="c1">
<div id="h1">340.8</div>
<div id="b1">
</div>
</div>
<div id="c2">
<div id="h2">340.8</div>
<div id="b2">
</div>
</div>
<br style="clear: both" />
</div>
CSS:
#wraper {
height: 150px;
}
#c1 {
width: 55px;
vertical-align: bottom;
display: inline-block;
}
#b1 {
background-color: #95111d;
height: 75px;
}
#c2 {
width: 55px;
margin-left: -4px;
display: inline-block;
}
#b2 {
background-color: #9e9e9e;
height: 115px;
}
DEMO
You can use absolute positioning to fix an element to the bottom of its container.
HTML:
<div class="container">
<div class="bar">
<div>
<div>340.8</div>
<div style="background-color:#95111d; height: 75px;"> </div>
</div>
</div>
<div class="bar">
<div>
<div>340.8</div>
<div style="background-color:#9e9e9e; height: 115px;"> </div>
</div>
</div>
<br style="clear: both" />
</div>
CSS:
.container {
height: 150px;
}
.bar {
width: 55px;
float: left;
position: relative;
height: 100%;
}
.bar > div {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
Example: http://jsfiddle.net/grc4/pAnqe/1/
<html>
<body>
<div style="height: 150px;position:relative;" >
<div style="width: 55px;float:left;position:absolute;bottom:0;left:0px;">
<div style="background-color:#95111d; height: 75px;"> </div>
<div>340.8</div>
</div>
<div style="width:55px;float:left;position:absolute;bottom:0;left:55px;">
<div style="background-color:#9e9e9e; height: 115px;"> </div>
<div>340.8</div>
</div>
<br style="clear: both" />
</div>
</body>
</html>
jsFiddle
You can get the desired effect by using inline block elements and giving them a vertical-align value of bottom. here is some simple html and css.
html
<span class="bar" style="height:75px;background-color:#95111d;">
<div class="label">340.8</div>
</span>
<span class="bar" style="height:115px;background-color:#9e9e9e;">
<div class="label">350.1</div>
</span>
css
.bar {
display:inline-block;
width: 55px;
vertical-align:bottom;
}
.label {
position:relative;
top:-1em;
}
I know this question has been asked to death but nothing through searching has worked for me.
You know the deal, I have a div element that I need to vertically align text in but nothing has worked (position:absolute;top:50%;margin-top:-x;display:table-cell;vertical-align:middle;etc., etc.)
Here is what I am working with (sorry for the inline CSS). Anyway, the I would use line-height but the text can be one or two lines. It should vertical align with the image which is always max-height of 30px (30x50).
<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
<div style="float:left;width:55px;height:40px;">
<img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" />
</div>
<div style="float:right;width:155px;font-size:0.7em;height:40px;">
This is the text to vertically align
</div>
</div>
One other thing you can do. If it's only one line of text in the div you can use line-height
example
div {
line-height:40px;
}
The idea is from here and should work for all browsers.
<div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b;
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;">
<div style="float: left; width: 55px; height: 40px;">
<a href="link">
<img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg"
alt="" /></a>
</div>
<div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;">
<div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%;">
This is the text to vertically align
</div>
</div>
</div>
<div style="clear: both"></div>
</div>
You need to do like this:
http://jsfiddle.net/rathoreahsan/5u9HY/
Use fixed height instead of padding in main div. and use line height for left & right Divs
Here is a clean version of the solution
<div style="background: yellow">
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div style="">
This is the text to vertically align
</div>
</div>
</div>
<div style="clear: both"></div>
http://jsfiddle.net/5y4Nb/
Seems like a common float issue which can be fixed with a clearfix or, like i did in the following code snippet, with a fixed height of the wrapper.
I also sat an line-height of the floating divs and made it a little wider.
Take a look at this:
<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px"> <div style="float:left;width:55px;height:40px;"> <img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /> </div> <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px"> This is the text to vertically align </div> </div>
http://jsfiddle.net/YqxPZ/3/
Is you need to show only a few lines of a very long text, here is the Fiddle. Adjust height according as needed.
.container-text {
height:40px;
width:180px;
overflow-y:hidden;
display:table-cell;
vertical-align:middle;
text-align: center;
}