Center DIV content Fluid Vertical and Horizontal - html

This is the example I have:
Line height does not apply to fluid divs. The code I have is currently based on line-height but the the sizes of the boxes change. So how can I have a link (content) always in the exact middle?
I want to make sure that the content inside this DIV is always going to be equally centered from the top and the sides. Vertical and Horizontal centered.
Current code: (note style tag is blank as this is dynamic filled)
<style type="text/css">
.box{
width:468px; /* php changes this sometimes */
height:60px; /* php changes this sometimes */
background:#eee;
text-align:
center;
border:
1px solid rgb(177, 172, 171);
line-height: 61px;
}
</style>
<div style="" class="box" id="">
<a style="color:#333;font-weight:bold" href="claimPrize();">Winner!</a>
</div>

Ran into a similar situation not too long ago, did a search and found an article about absolute centering from css-tricks, here is the article and an accompanying fiddle to test it out.
CSS
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
Demo
http://jsfiddle.net/andresilich/YqKMH/

Related

Why is my paragraph exceeding the hr line which is below the paragraph on resizing?

The problem is that I have an image on the left side of my screen and I have a paragraph on the right side of my screen and I have an hr line below the paragraph and the image. So whenever I resize the browser window, the paragraph just goes below the hr line because it gets compressed(squashed) on resizing. I don't want the paragraph to go below the hr line even if I resize the browser window. I want the paragraph to go below the image but not exceeding the hr line. If you want to see what is the problem please check out my website and resize the browser window to see the problem.
Link to website: http://www.greenfield-school.com/AboutUs.html
Thanks
This is the HTML:
<h3><b>About Us</b></h3>
<hr style="border: 2px solid green; width: 88%">
<div class="row2">
<div class="column2" style="background-color:;">
<img class="pic img-responsive" src="Icon.jpeg" style="height: 200px; height: 230px">
</div>
<div class="column" style="background-color:;">
<h5 class="welcome"><b>Mission</b></h5>
<p class="paragraph" style="font-family: book antiqua"><li class="vision1">To care for, respect and encourage all children equally, regardless of gender or ability.</li>
<li class="vision1">To encourage our pupils to develop a sense of self worth, self discipline, personal responsibility and consideration for others.</li>
<li class="vision1">To provide an enjoyable, challenging and purposeful atmosphere for our pupils.</li>
<li class="vision1">To value and encourage the special talents and strengths of pupils.</li></p>
</div>
</div>
And this is the CSS:
.vision1 {
list-style-type: square;
font-family: book-antiqua;
}
.row2{
display: flex;
padding: 2rem 6rem;
}
.column {
flex: 60%;
height: 200px; /* Should be removed. Only for demonstration */
}
.column2{
flex: 0%;
height: 0px; /* Should be removed. Only for demonstration */
}
h3{
padding: 5rem 5rem 0rem;
color: green;
}
Let me offer you an alternative - I can't seem to trigger that auto-adjust on the container height. But this works seamlessly:
This is your HTML:
<div class="container">
<div class="column one"> Column 1 - this is where your picture is</div>
<div class="column two"> Column 2 - this is where your paragraph is</div>
</div>
<hr />
This is CSS:
.container{
width: 100%;
overflow: auto;
height: auto;
clear: both;
display: block;
}
.column{
float: left;
}
.column.one{
//style for column one here
}
.column.two{
//style for column two here
}
hr{
clear: both;
}
This will adjust the height of the container based on on the biggest height of either column one or column two
I have checked this code here CodePen

Prevent floated div from going to next line given text content length

I've run into some CSS positioning issues. After reading some other questions, I have been unable to find my exact issue or anything that I can identify that would indicate how I could resolve my issue.
I have an undefined number of rows of data that need to follow the same structure. The structure is as follows:
A colored icon on the left
Undefined length of text on the right
So far I have the following result which I am happy with in regards to single line text:
When I have the text extend beyond a single line however, I end up with the following result:
I need to make it so that my text is always aligned vertically with my icon, so that the middle of the text lines up with the middle of the icon. The only fixed values I have are for the widths of my icons. I unfortunately can't fix the width of the text div as it needs to expand as the window expands.
I have got the following structure to create the images presented:
<div class="row">
<div class="iconDiv">
<div class="circle"></div>
</div>
<div class="informationDiv">
<span class="information"></span>
</div>
</div>
.row {
clear: left;
}
.iconDiv {
float: left;
margin-left: 10px;
}
.informationDiv {
display: inline-block;
float: left;
padding-top: 3px; /*How I am currently aligning my text vertically to center of icon*/
}
I have tried using box-sizing just incase this was pushing the div to the next line but it didn't seem to help. I've also tried setting the height of the div but again no luck. The truth is that CSS is not my strong point and that I can miss what the real reason behind a problem is. If there are any resources anyone would recommend in particular to assist with this side of positioning, that would be fantastic. Additionally if the way that I am containerising (surely that is a word) things is not recommended, I am more than open to changing that.
If this is too difficult without using fixed values, then I could alternatively make it so that the icon remains towards the top of the row, and the text continues to descend as it grows, with the top of the text being aligned close ot the top of the icon. This is definitely not the preference however.
Thanks you all in advance!
You can simplify this down to one flex parent and two children. Vertical alignment with flexbox is hassle-free.
Demo
.row {
display: flex;
align-items: center;
}
.row {
margin-bottom: 1.2em;
}
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
margin-right: 15px;
flex-shrink: 0;
}
.circle.high-pri {
background-color: #ea9999;
}
.circle.medium-pri {
background-color: #f9cb9c;
}
.circle.low-pri {
background-color: #b6dca8;
}
<div class="row">
<div class="circle high-pri"></div>
<span class="information">High priority - No issues here</span>
</div>
<div class="row">
<div class="circle medium-pri"></div>
<span class="information">High priority - No issues here but slightly longer text</span>
</div>
<div class="row">
<div class="circle low-pri"></div>
<span class="information">High priority - No issues but much longer text than first expected, which is definitely okay, see?</span>
</div>
I am not quite sure how you are generating the circle, Is it an icon or an image? When you are using an icon. You can symply create something like this:
<p><img class="circle">Undefined text</p>
I think this won't break the line. And always keep it in front.
Also. You should probably not use padding-top on the text for aligning it in the middle of the circle. Use line-height.
For example:
When your circle is 30 px high. Use line-height: 30px; This will always keep it centered next to the circle and works better than padding regarding to responsiveness.
You're not far off.
Given your current CSS, the best way to achieve this is to not float .informationDiv. Set it to display: block and then give it a margin-left. The floated element will then sit inside the margin.
Like this...
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.row {
clear: left;
}
.iconDiv {
float: left;
margin-left: 10px;
}
.informationDiv {
display: block;
margin-left: 40px;
}
<div class="row">
<div class="iconDiv">
<div class="circle"></div>
</div>
<div class="informationDiv">
<span class="information">A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. </span>
</div>
</div>
I have come up with a solution for your issue by using css flexbox.
Working demo : https://codepen.io/shubhamYerawar/pen/xBZWLX.
.container {
display: flex;
flex-direction: column;
}
.container__row {
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 10px;
}
.red {
background: red
}
.green {
background: green;
}
<div class="container">
<div class="container__row">
<div class="icon red">
<!-- here your icon or image will go -->
</div>
<div class="text">Text</div>
</div>
<div class="container__row">
<div class="icon_container">
<div class="icon green">
<!-- here your icon or image will go -->
</div>
</div>
<div class="text">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
</div>
</div>
<div class="container__row">
<div class="icon red">
<!-- here your icon or image will go -->
</div>
<div class="text">Text</div>
</div>
</div>
Hope this helps you.

CSS - Floating Two Divs Next To Eachother, Instead They Go Underneath Eachother

I'm trying to position two divs next to eachother, and keeping the mobile visitors in mind.
The problem: Instead of floating next to eachother, when there's a good amount of text used in the div, it goes underneath.
Here's an example:
.codeblock {
width:500px;
}
.left{
float: left;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div class="left">
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Why is this happening? Is there a solution, without using fixed values (excluding the image style width)?
Float only the image
.codeblock {
width:500px;
}
.left{
float: left;
margin-right:10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Another option would be to use flexbox instead of float. It will be a little bit more work, but it is a new feature and always good to try new things.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
UPDATE
Like this: no class. You inform the main class that it is flexbox and its son will have a padding do separate them.
.codeblock {
display: flex;
width:500px;
}
.codeblock > * {
padding: 0 10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Considering mobile users I would do this that way with flex-wrap and min values for content
.codeblock {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-width:500px;
}
.codeblock>img {
flex: 0 0 125px;
width: 125px;
height: auto;
margin-right: 20px;
}
.codeblock>div {
flex: 1 1 200px;
min-width: 200px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div>
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>

How do I make these HTML blocks of info stay the same size?

I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!

CSS styling tables in IE

I'm using a table for the footer of my web page. I really don't know much about tables because I've always used CSS. The following is the only table I've ever made. It seems to work in Opera, Chrome, and Firefox, but everything goes to the left in IE. I'm not sure what I'm doing wrong with the table because I don't know much about tables. Here is the HTML:
<div id="framecontentBottom">
<div id="container">
<div id="row">
<div id="left">
<!-- Counter Code START --><img src="http://www.e-zeeinternet.com/count.php?page=760915&style=LED_g&nbdigits=4&reloads=1" alt="Web Counter" border="0" ><br>Page Views<!-- Counter Code END -->
</div>
<div id="middle">
Contact me at jacksterdavis<img src="images/#white.png">gmail.com
</div>
<div id="right">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f302421558e3fc2"></script>
<!-- AddThis Button END -->
</div>
</div>
<div id="row">
<div id="left">
</div>
<div id="middle">
<p>The internet is the printing press of the 21'st century.</p>
</div>
<div id="right">
</div>
</div>
And here is the CSS:
#container {
display: table;
width: 100%;
}
#row {
display: table-row;
}
#middle {
width:50%;
text-align:center;
display: table-cell;
}
}
#left
{
width:25%;
text-align:left;
display: table-cell;
}
#right
{
width:25%;
text-align:right;
display: table-cell;
padding: 5px;
}
#quote
{
text-align:center;
width:100%;
}
#logoBtm
{
align:middle;
text-align:center;
}
#logoBtmLeft
{
align:left;
}
#logoBtmRight
{
align:right;
}
#framecontentBottom{
clear: both;
position: relative;
z-index: 10;
margin-top: -3em;
top: auto;
bottom: 0;
height: 80px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #585858;
color: white;
width: 100%;
}
If you point out everything wrong with my table it's appreciated, thanks. A CSS fix would be the best but if the HTML must be edited it's fine.
the problem most likely lies in the fact that you have two divs with the same id. use classes for row instead.removed for the comfort of others. This line doesnt help the solution at hand.
also, in referring to your comment, ie 7 does not support table display CSS.
http://caniuse.com/#search=table-cell
use a combination of inline block or float. but beware, as inline block has its own issues with ie7
http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html
Here is a working, valid, example.
http://jsfiddle.net/mRHnW/2/
A couple changes: Ive styled every div inside of .row so that it gets applied once (and if it needs to be fixed, it can be, in one place. Even in CSS, it needs to be DRY.
I removed the margin-top from the #frameContentBottom selector because it was screwing with jsfiddle giving me visible results. Feel free to re-instate it if its important to your layout.
I adjusted the width of your 'columns' to be slightly less than 100%, because you've also included padding. The way the CSS Box Model as specified by W3C works is that the width declaration does not include padding, border, and margin. Thus, if you're creating a 100% div, and want 5px padding, then you need to specify less than 100% to get the padding within the 100% confines.
On a sufficiently wide screen (something bigger than jsfiddle default panes), your footer should look about what you expect.