I am trying to make my content align left within a div... the code is below... I made this work once but lost the code. now I cannot figure it out again.
Html5:
<div class="wrapper materials">
<section id="materials">
Then I make an article tag
then I create the article content including h tags, p tags etc.
then I close the tags
then I close the div
css:
.materials {
width: 80%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: left;
}
The text in the materials wrapper is staying centered but I want it aligned left.
First of all you are using materials as a class as well as an id so if you are targeting the element holding materials as id, than you need to use #materials and not .materials
#materials {
width: 80%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
text-align: left;
}
Apart from this the only thing possible here is that you might be having some more specific selector which is overriding the block of your CSS, try using
#materials {
text-align: left;
}
Your class .wrapper has text-align: center. It would be advisable to review and simplify your stylesheet based on case uses. For example, what text do you want centered within elements of class .wrapper? If you specify those cases, then only those elements within the wrapper will be centered.
Alternatively, if you want everything in .wrapper except for .materials to be centered, then specify that as follows:
.wrapper.materials {
text-align: left;
width: 80%;
margin: 0 auto;
}
By combining the two in this way you're telling the browser not to choose one class over the other where they differ, but to treat them as a special, unambiguous case.
Related
Seems I cant find correct class to horizontally align the Agent imageswith text below . site: http://hendersonrealestatepros.com/listings/2724-mintlaw-ave/
tried
.connected-agents{
display: inline-block;
margin: auto;
width: 70%;
padding: 10px;
}
.connected-agents{
float: left;
width: 70%;
padding: 10px;
}
i would recommend using margin: 0 auto; and float: none for #listing-agent so that it will align to the center. please let me know what output you are expecting
try this -
#listing-agent .connected-agents {
display: table-row;
}
.agent-thumb, .agent-details {
display: table-cell;
vertical-align: middle;
padding-bottom: 20px;
}
You have quite a large amount of CSS classes interacting which makes a simple solution a bit tough due to the "style soup" (styles overriding styles overriding styles) and markup that could be improved upon.
The one main assumption I'm going to make is that you want the agents to take up the full width that the paragraphs above the agents take up.
Remove float: left; and width: 48%; (possibly the padding too) from #listing-agent. You have two selectors setting float and width for #listing-agent. They are #listing-agent, #contact-form {...} (in the <head> of the page) and #listing-agent, #listing-agent + #listing-contact {...} (in impress-agents.css line 141). I would remove #listing-agent from those selectors so they are: #contact-form {...} and #listing-agent + #listing-contact {...}.
Remove the child <div class="connected-agents"> of #listing-agent.
Doing those two things will get the agent section the same width as the paragraphs above.
Now to horizontally align the agents (with text below image).
Make sure to undo the display table stuff that you added from another answer.
Float the agent container element to the left. You have a myriad number of CSS classes to hook onto, connected-agents vcard post-11274 employee type-employee status-publish has-post-thumbnail hentry offices-tr-realty job-types-broker-salesperson entry. Use which ever on works best for you. If you choose to use .connected-agents make sure to remove the <div> mentioned above. Below is one option:
#listing-agent .employee {
float: left;
width: auto; /* removes `width: 100%;` set by .hentry and .entry */
}
I have a question around vertically centering images which I haven't been able to find a solution to and would love to tap some other folks' brains. I am working on this page: http://www.heirloomtileworks.com/newsite/gift-tiles
The usual solutions haven't been working so far (at least not the way I've implemented them). My images are not contained within a div on a per-row basis; rather the rows of images are created by clearing floats every 4n+1 child elements.
The images may be a variety of heights, and the div is also not of fixed height. Images are added via the content manager. Each image is contained within div styled in this way:
#gift-tile-small-container {
width: 120px;
position: relative;
min-height: 100%;
overflow: hidden;
float: left;
margin-right: 30px;
text-align: center;
margin-bottom: 20px;
}
These divs containing images currently flow down the page within a div (#gift-tile-container). So each row is created not by a separate div, but like so:
div#gift-tile-container div:nth-child(4n+1) {
clear: both;
}
I would like each #gift-tile-small-container div to align with the others in its row, so that the vertical centerpoint of each div is aligned with that of it's rowmates.
If you need to see the HTML as well, let me know, although it is written in Textpattern native tags and not normal HTML. It should be fairly self-explanatory. I appreciate your help!
You can try this out. Use inline block for the containers. I reduced the right margin because between each div container, there is white space. I tried this in firebug and it seems to work
#gift-tile-small-container {
display: inline-block;
margin-bottom: 20px;
margin-right: 25px;
min-height: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 120px;
}
Again, as I mentioned in the comments, if you need to apply the same style to multiple elements. Use class instead of ID.
I have a fluid article that has 2 columns 1 contains an image that fills whatever space is available for that column, the other column has text but I'm not sure how I can make this column .content-col occupy the space provided by .article. Can anyone advise how this can be achieved?
Jsfiddle http://jsfiddle.net/R7AuG/
CSS Snippet
.img-col{
width: 25%;
float: left;
}
.content-col{
background: black;
width: 75%;
float: left;
}
.col{
width: 50%;
float: left;
}
I also understand that this could be achieved with display:table but I'm wondering if this can be done without?
If you don't want to imitate a table, you could use a small CSS trick, namely, adding
overflow: hidden
to article, plus applying
margin-bottom:-1000em;
padding-bottom:1000em;
to .content-col
See example
I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can't seem to get this right...
This is how it looks (It's blue because the outer Span tag is marked in FireBug to show that it's stretching the entire surface):
As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don't want either of this.
This is the markup:
This is the current CSS of the tags:
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
I left out the CSS that isn't relevant for my problem, colors, font-specs and such. Needless to say I'm no ace at CSS. And I've looked up several guides covering the problem, but I've only managed to find examples where the entire content of a div is centered, and that's not what I want.
Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?
Thanks!
EDIT: Here's a screen shot of the entire layout due to request. Sorry I have to blur some things... but they are in either case not important. =)
EDIT2: I did manage to solve my problem using the following CSS:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
I'm sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn't a fitting solution.
You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.
See also this article: Understanding vertical-align, or "How (Not) To Vertically Center Content"
As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you've posted, it does not appear that you do), then you could
Give the container element CSS property `position: relative'
Give the element-to-be-centered CSS property position: absolute
Set the CSS top property of the element-to-be-centered to (containerHeight / 2) - (centeredEltHeight / 2).
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;