In the code below I have 3 divs, where the 1st and 3rd divs are tables that are filled with text of varying lengths (decided by the user) on a user submit. The 2nd div is an image. When a user submits and text is filled into the tables the center image (2nd div) moves depending on the length of text. For example, if the longest word of either tables is on the left table, the image will shift to the right, along with the right table. If the longest word in each table are the same length, nothing will move.
What CSS positioning can I use to ensure that the 2nd div stays centered no matter the length of text in the divs on either side of it? Essentially I want the 1st div to expand to the left and the 3rd div expand to the right, so that any change in the length of the <span> will not move the centered image at all
<div class="text_tables" id="left_table">
<table>
<tr>
<td>
<span class="output render" id="text1"></span>
</td>
</tr>
</table>
</div>
<div class="text_tables">
<img id="img1" src="{{ url_for('static', filename='img/img.png') }}">
</div>
<div class="text_tables" id="right_table">
<table>
<tr>
<td>
<span class="output render" id="text6"></span>
</td>
</tr>
</table>
</div>
Well, to honor those who say that tables shouldn't be used for layout, I've put together a little FIDDLE with just divs.
Is this the type of behavior you're looking for?
HTML
<div class='holderdiv'>
<div class='leftdiv'> asdfasdfasdf</div>
<div class='centerdiv'></div>
<div class='rightdiv'>ASDASDFASDFASDFASDF </div>
</div>
V 2.0
Ok, this FIDDLE seems to do much of what you want.
I'm a bit confused about exactly what you want. Do we need to parse all of the spaces out and line up the words in a single column in either wing?
Provide more details, and I can spiff it up a bit more.
Related
Hi im having trouble with some money number alignment. I want my data do be aligned to the left side of the columns BUT the numbers of the money have to look relative to each other like in the screenshot.
This screenshot is what I have atm:
This is what I want to do:
Here is my structure:
<tr>
<td style="text-align: left">name</td>
<td style="text-align: right">money</td>
<td style="text-align: center">date</td>
</tr>
And the only css atm that I use for positioning is setting the widht of every of those td's to 30%
At first I thought I could position them simply by putting a <p> in there that would align the content to the right and give the rest its relative widht, however that way would be possible but then I get a ball of js or jquery that I prefer not to have.
I have bootstrap installed but as of now I havent really touched it in this project except for the column grid positioning.
Does anyone have some kind of way to achieve what I am trying, or can someone push me in the right direction? Thanks in advance.
ADDITION: Semi complete code sample:
Codepen
The above code is the whole section the table is located in but I copied all css relative to the issue and not every single css class my problem is reconstructed there exactly even the random <p> tag I tried is in there.
You should use two columns:
<div class="row">
<div class="col-lg-6">List of money values</div>
<div class="col-lg-6">[Empty]</div>
</div>
And align text to right in the first one:
<p class="text-right">Your text.</p>
What I'm trying to do is make the red arrows align with the text on the right in the "In this issue, you can:" section of http://jsfiddle.net/me42hfkw/. In other words, I want the ›s of rows like
<td valign="top" style="font-family:Helvetica,Arial;padding-right:10px;padding-bottom:20px;">
<p valign="top" style="color:#FF0000;font-size:36px;font-weight:bold;margin-top:0;">›</p>
</td>
<td valign="top" style="font-family:Helvetica,Arial;padding-bottom:20px;">
<p style="color:#666666;line-height:18px;margin-top:0;">Learn about the IT and business trends driving walk-up service centers.</p>
</td>
</tr>
to be aligned at the top of their cell. I can't figure out why it's not working; for I was able to make it work on http://jsfiddle.net/qprc69z1/. What am I missing?
This is for an HTML email, by the way, so that I need to use as primitive of styles as possible.
http://jsfiddle.net/me42hfkw/1/
You can decrease the line height of your p tag to adjust the position of the text. With a font-size as large as you're using there is a lot of white space to account for. Decreasing the line height will eliminate that white space.
The difference between the fiddle's you provided is that the one didn't have a p tag it was inside of a td which "plays" a little better when using vertical align.
I am working on an add to cart button to something I am making.
Currently, I hardcoded a fixed margin space of:
margin: 10px 20px;
From the text Lab and + ADD ME!
As you can see, it works, but when I have classes of differing number of letters, the alignment is all messed up.
So I looked into having a Linux-style/C-style tab separator string that could allow me to denote a fixed separator length so all my elements would align vertically, using left-padding: 5em.
However, that did not work.
Could someone tell me how I could align all my add to cart buttons?
A sample of the HTML:
<div
class="margin-class-type"
>
<h4>
<div class="title-container">{{ $type }}
<a
href="javascript:void(0)"
class="btn btn-material-yellow-600 btn-xs btn-raised cart-button mdi-content-add-circle-outline">
Add Me!
</a>
</div>
</h4>
<table
class="table table-striped"
>
<th>Class</th>
<th>Section</th>
<th>CRN</th>
<th>Day</th>
<th>Time</th>
<th>Professor</th>
<th>Enroll</th>
<th>Max Enroll</th>
<th>Credits</th>
Depending on how your code is structured, there are several ways to accomplish this.
1) If your titles are not dynamic (you know that they will always be "Lab" and "Lecture") you could set a width on the title element's container that is equal to the width of your widest title with a little extra. Then, you place your "add to cart" button inside the container holding the title and position it absolute so it will line-up vertically always.
Example:
<div class="title-container"><h2>Lab</h2>Add Me</div>
<!-- YOUR TABLE -->
<div class="title-container"><h2>Lecture</h2>Add Me</div>
<!-- YOUR TABLE -->
<style>
div.title-container{width:300px;position:relative;}
a.cart-button{display:block;position:absolute;top:0;right:0;}
</style>
2) If the titles will be dynamic, you can use a bit of Javascript to loop through each and take the widest element, setting that as fixed-width for all others. This is a bit more involved and based on your question I am guessing it would be overkill.
Good luck!
You can add a div for lab and add me and for "button" float : right
or
you might create a div
and inside that 2 inner divs.
the left inner div should be of specific length (max length you expecting for a label,e.g.lab)
all inner divs are float left in this case
or any alternative way
basically you need to fix the positions anyway.
Thanks
Sam
Put your titles and buttons inside an inline element and give them a fixed width large enough to accommodate. No example of code or anything but you don't appear to need one Hope it fixes your problem.
A simple question but large impact on appearance.
I want text indented from cell border and have tried style=text-indent: 4px (not formatted so it displays properly here) but while the first line is indented, the lines after the <br> tags are not indenting. Please help. I need to use div because of some Javascript. Here is flawed code:
<td>
<div id="navbar" style="text-indent:4px"><b>View by:</b><br>
Popular<br>
Trending<br>
</div>
</td>
text-indent is only supposed to touch the first line. Use margin (or margin-left or padding or etc) if you want to adjust the entire block.
Try adding paddding to element, that holds your text you want to indent.
<td style="padding:5px;">text</td>
Im trying to place some text content under each of the images in a gallery but I carnt get the text to be Bellow the image instead of at the side
http://jsfiddle.net/9YE3H/
How can I fix that?
Put each image and paragraph in a single div like such:
<div>
<img src="" />
<br />
<p>Content</p>
</div>
This should work for you, as long as you haven't set the float attribute for any of them.
There are several ways to solve this. One would be using tables and put this in the td-tags:
<div>
<img src="images/search_images/musicians/adele.jpg" width="175" height="176" /><br />
<p>Artist: Adele</p>
<p>Genre: Singer-Songwriter</p>
</div>
Another one would be using that combined with either positioning or more preferably floating.
There are numerous ways, but I would say use some divs to make individual container layouts for each image / text item.
<div class="img-container-class">
<img src="img address here" />
<div class="img-text-class">
<p>Artist: Person</p>
<p>Genre: Genre Type</p>
</div>
</div>
Now the "img-text" class isn't totally necessary. But, sometimes I feel it is a good idea to section off the text area a bit more, so that you can do some more specific changes to the text (that's up to you).
Personally, I would go back and revamp some of those styles. While looking at the snippet you posted I noticed that almost all of the elements have "float:left" attached to them, as well as a lot of mixing of margin and padding. I would say, start simple, float the div that is holding both the image and text, and then let the normal flow take over from there. Once you get that containing structure set then I think you will find quite a few style sections you can trim down.
The simplest effective approach is probably a single-cell table, with the text in the caption element, e.g.
<table class=img callpadding=0 cellspacing=0>
<caption align=bottom>
Artist: Adele<br>
Genre: Singer-Songwriter dcccc
</caption>
<tr><td><img
src="images/search_images/musicians/adele.jpg"
alt="(Adele)" width="175" height="176"></td>
</table>
This is particularly convenient if you want to display many images side by side, so that the amount of images in a row is not fixed but gets adjusted according to window width. In that case you would just set align=left on the table elements and probably set some right margin for them.