I'm looking for the best way to create a block of left-aligned text and a block of right aligned text inside a div.
This is an image of what I want it to look like
I've thought about creating three divs with one in the middle acting as a buffer, but it doesn't seem to work. I'd need to hard code the length of the middle div, and this doesn't seem like the best approach
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: left; width: 100%" > </div>
<div style="float: left;">right aligned text </div>
</div>
Why not use the "text-align" property on the second div?
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: right; text-align: right;">right aligned text </div>
</div>
EDIT: You don't need a middle DIV for a spacing. You can simple use a percentage width for the two other DIVs and using float left and right you have a "buffer":
<div style="width: 500px;">
<div style="float: left; width: 45%;">left aligned text</div>
<div style="float: right; text-align: right; width: 45%;">right aligned text </div>
</div>
try this -
<div style="width: 500px;">
<div style="float:left">left aligned text</div>
<div style="text-align: right;">right aligned text </div>
</div>
Related
I tried the following to vertically align text in a div (fiddle):
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
This should not be vertically centered
</div>
<div class="col-xs-2" style="display: table-cell; vertical-align: middle;">
This should be vertically centered
</div>
</div>
</div>
However, the text remains top-aligned! What am I doing wrong?
(Note: this is not a duplicate, because the duplicate questions for this issue all recommend the above as the solution: I'm asking why the solution isn't working for me).
It is top aligned, but unless you change the height it will look the same as middle or bottom aligned.
What you have now, but with background colors added to the divs:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2" style="background: #bbb;">
This should not be vertically centered
</div>
<div class="col-xs-2" style="background: #888; display: table-cell; vertical-align: middle;">
This should be vertically centered
</div>
</div>
</div>
What you will see if you give each a height of 50 pixels:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2" style="background: #bbb; height: 50px;">
This should not be vertically centered
</div>
<div class="col-xs-2" style="background: #888; height: 50px; display: table-cell; vertical-align: middle;">
This should be vertically centered
</div>
</div>
</div>
I have an h4 nested in 2 divs like so
<div id="my-team-lineup" style="text-align:center">
<div id="myteamDiv" style="width:100%; ">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow">
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text</div>
</div>
<br />
<h4>Week At Bottom</h4>
</center>
</div>
</div>
I want to have this h4 sticky to the bottom of the page. I have tried every combination of position and bottom I can think of and nothing is working. Just a note as I have an exact replica of this that takes up the other 50% of the page, and the height of the divs can be different due to content.
First, you didn't closed all divs in your code. correct it.
You can set position as fixed and bottom as 0.
HTML
<h4>text</h4>
CSS
h4{
position: fixed;
bottom: 0;
}
https://jsfiddle.net/xxfhqv36/
I am trying to create two columns of equal width, the left one containing text and the right one containing an image. I would like the image to resize down to the width of the column if the image width is greater than the column width, but would like the image to keep its original size if the image is less than the column width. I have tried the instructions in this question, but the image, if larger, will consume whatever space it needs, squishing the column on the left containing text. I am wondering if this has to do with how "table-cell" divs behave, or if it is a precedence issue where the browser will accommodate an image before text. My code looks something like this:
<div style="display: table; width:100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
Also, I am using FireFox as my browser to test. Thanks!
EDIT: I also tried an alternative method to get the same effect using float divs (code below). The problem is I would like the two columns middle-centered, and I cannot get the smaller float div to size to full height in the parent container, so the inner contents are top-aligned. However, the image does resize properly, which backs up my hunch that this problem is related to how "table-cell" divs behave.
<div style="position: relative;">
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<p>content</p>
</div>
</div>
</div>
</div>
<div style="float: left; width: 50%;height:100%;background-color:#F00;">
<div style="display: table;height:100%;width:100%;">
<div style="display: table-row;height:100%;width:100%;">
<div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
<img style="max-width:100%;height:auto;" src="image.jpg">
</div>
</div>
</div>
</div>
</div>
Code was working fine in Chrome. This seems to be an issue only in Firefox as per this article:
http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/
Adding table-layout:fixed; to the div styled display:table; gives the results you're looking for- allowing the image max-width to work and respecting the cell widths.
<div style="display: table; width:100%; table-layout: fixed">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<h1>Header</h1>
<p>Description</p>
</div>
<div style="display: table-cell; width: 50%; vertical-align: middle;">
<img style="max-width: 100%;height:auto;" src="image.png">
</div>
</div>
</div>
I have two columns, floated left and right, like so:
<div style="float: left;">
text1
</div>
<div style="float: right;">
text 2
</div>
but how can i move the right column a little bit to the LEFT? with 'padding'? how to?
or if i use this, how can i move the column on the right it a little bit to the RIGHT?
<div style="float: left;">
text1
</div>
<div style="float: left;">
text 2
</div>
You can change the css style to do it try the following
<div style="float: left; position: relative; left: 30px">
This changes the positioning to relative and then you move the box based on what it's original position was.
You can try this instead:
<div style="float:left; padding-right:-30px;">
or
<div style="float:left; padding-right:30px;">
Hope it helps!
I have the following:
<footer id="contentinfo" class="footer">
<div class="networking_wrapper">
<div style="float: left;"><img src="#Url.Content("~/Content/Images/twitter.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/flicker.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/facebook.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/blog.png")"/></div>
</div>
</footer>
How can I make .networking_wrapper to be centered on #contentinfo (which is a width 100% of the view because, as you can see, is the footer of the page).
Resolved!
Just had to add text-align:center; to the <footer>
and set .networking_wrapper display: inline-block.
Hope it helps someone =)