I am trying to align div and all my efforts using float and margins didn't bring what I want. So I thought this is the right place
basically looping the below in Foreach:
<div class="comment_name">#Html.displayName</div>
<div class="comment_time">#Html.formattedDateTime(item.dTime.Value)</div>
<div class="comment_body">#item.displayComments</div>
and am trying to display like the below text:
Dispaly Name , 11 Feb 2013: User entered comment.
What should be the CSS to make it work?
Updated after Span answer
Span worked. But am having issues if the length of comment is long. am getting like below
Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid. This article tries to answer the following question
but which should be
Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid.
this article tries to answer the following question
You can use float: left on every div and clear: left; for the first one;
Demo: http://jsfiddle.net/9mfR8/
div {
border: 1px solid red;
float: left;
}
.comment_name{
clear: left;
}
Or you can use display: inline-block; for the three divs and enclose them in a container div (that is display: block by default and will force a "new line"),
Personally I would say use <span>s instead of <div>s as they are already inline elements:
<span>#Html.displayName</span>
<span>#Html.formattedDateTime(item.dTime.Value)</span>
<span>#item.displayComments</span>
If you want to stick to <div>s use:
display: inline;
or if the single containers have for example a fixed width:
display: inline-block;
Edit
To achieve the result in your updated question, you can use this:
HTML
<span>Dispaly Name,</span>
<span>11 Feb 2013:</span>
<span> The example will show you how to implement a read-only grid. This article tries to answer the following question.
</span>
CSS
span {
vertical-align: top;
}
span:last-child {
display: inline-block;
width: 400px;
}
DEMO
http://jsfiddle.net/jkZeZ/
The following should achieve what you require:
.comment_name {
display: inline-block;
}
.comment_time {
display: inline-block;
}
.comment_body {
display: inline-block;
}
Related
I have a page with tab navigation at the top (page here; tabs are 'Production,' 'Story and Development,' etc). I would like to ensure the row of tabs are horizontally centered on the page. How can I accomplish that? If I'm not mistaken, it's currently a tad off center.
By following the instructions on the W3 Schools page on CSS centering, I came close by setting:
display: block;
margin: auto;
width: 99%;
But I'm not sure if that's the proper/best solution. Is there a solution that does not require setting width: 99%?
If it matters, the site has been built with WordPress.
Thanks.
You have two ways you could approach this:
The text-align: center Method
.ut-nav-tabs li {
display: inline-block;
float: none;
vertical-align: top;
}
.ut-nav-tabs li:last-child {
margin-right: 0px;
}
.ut-nav-tabs {
text-align: center;
}
This works only if you declare text-align: center on the containing parent - the parent element must be a block element. The nested children elements must be inline block elements (e.g: display: inline-block) with no float rules declared on them, floats will negate any attempt to horizontally center align elements this way, and most other ways.
The display: flex Method
.ut-nav-tabs {
display: flex;
justify-content: space-around;
}
.ut-nav-tabs li {
float: none;
margin-right: 0px;
}
This is the "new kid" on the block and the "hot fix" for any alignment issue concerning CSS these days, I would hazard to say it is the "jQuery" of CSS now.
Anyway, it is for good reason, flex-box rules allows you to specify general alignment (horizontally and vertically) and lets the browser do all the calculations for precise positioning - this is also why is a popular responsive solution too.
Browser Compatibility: A heads-up though, flex-box has poor or very limited support for legacy browsers, older browsers may give you unexpected results, so you should use this with caution in production code if that will be a concern.
I think this way is better :
.ut-nav-tabs {
width: 100%;
text-align: center;
}
.ut-nav-tabs li {
width: 179px;
float: none;
display: inline-block;
zoom: 1;
vertical-align: middle;
}
On my website www.drivkrets.se I´m trying to insert a symbol (orange lines) before my headings using CSS :before. I´have been able to insert the image in the right size but now I would like to vertical align the symbol image with the text. When the heading is on one line or three lines I doesn´t look good. I´ve tried different variations of code but none of them works.
Does anyone have any idea how I should do this?
The headings that suppose to have this symbol before I´ve named ".specialrubrik". Now I´m using the code:
.specialrubrik:before {
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-
marker-e1490098005864.png');
float: left;
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}
Best regards
Peter
This is a CSS question and has nothing to do with WordPress. You don't want to float inline-block elements, and vertical-align only works with display: inline-block elements.
.example-heading:before {
display: inline-block; /* no floats! 'middle' only works with inline-block */
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-marker-e1490098005864.png');
vertical-align: middle;
margin-right: 12px;
}
<h2 class='example-heading'>Example heading</h2>
Thanks for your idea #sheriffderek. I still don´t get it right.
I´ve changed the code now and trying to use the :before on h2 instead.
h2:before {
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-
marker-e1490098005864.png');
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}
h2 {
text-align: left;
display: -webkit-inline-box;
vertical-align: middle;
}
It works when I have a short heading but if the heading is two or three rows it looks strange. Example: "Kunskap och uppfinningsrikedom till era elsystem". Do you know how I can make all of the text to flow right of the symbol?
Peter
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 3 spans inside a div.
<div class="align">
<span class="a">Title</span>
<span class="b">Someinfomation</span>
<span class="c">Toright</span>
</div>
for making the c class to align vertically, I have to use margin-top to fix it
however, for IE7 looks differently.
Here is online sample: http://jsfiddle.net/wZmGQ/
Yes, I want IE7 works as well.
If someone could help me with a better solution?Thanks
Solution is shown below, for someone who looks for IE7 solution
Got the answer from float: right in IE7 dropping to a new line
Try to small change markup: place items with a float before items
without it (from the same row). It should help.
Whenever you float an element, you are implicitly declaring display:block. So when you write the following code:
.some-element {
display: inline-block;
float: right;
}
... is the same exact thing as doing this:
.some-element {
display: inline-block;
display: block;
float: right;
}
... but I realize that doesn't help you much. Check out this fiddle, sorry I can't test in IE7 at the moment, but see if this helps get you in the right direction:
http://jsfiddle.net/ryanwheale/wZmGQ/3/
Essentially this:
.align{
border: 1px solid black;
line-height: 35px; /* larger than your largest font size */
}
.a, .b, .c {
vertical-align: middle;
}
Create an ie only stylesheet. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
.long {
width: 100%;
}
.short {
width: 49.2%;
}
I have defined the above classes but for some reason when I reference 2 x short divs they are on separate lines (not side by side as expected).
This is the most basic of basic - I think the sun has got to me.
Div elements are, by default, display: block, position: static and float: none - so they cause line breaks, are in normal flow and don't let following content bubble up next to them.
You'll need to change one of those if you want them side-by-side.
display: inline-block is probably your best bet.
It's because <div>s are block elements, not inline elements.
Try this:
.long {
width: 100%;
}
.short {
width: 49.2%;
display: inline-block;
}
Divs are
display: block;
by default. If you change them to be
display: inline-block;
they should appear side-by-side.
Divs are block elements so they won't show up next to each other unless you add a float to one or both. (Also, the .long class will make the div span the entirety of its container which would preclude any other elements showing up next to it.)
.long {
float: left;
width: 100%;
}
.short {
float: left;
width: 49.2%;
}
You have to define the attribute float:
.short {
float: left;
width: 49.2%;
}
EXAMPLE
http://jsfiddle.net/7eS22/
You can use display: inline-block; or float on your divs, like float:left;.
I hope this can help you.
You need to modify the "display" property as well. The default for a div element is block, which accepts no elements next to it unless otherwise specified.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
http://quirksmode.org/css/css2/display.html
You can add:
.short { width: 49.2%; display: inline-block; }
Or you can float the first one:
.short:first-child { float: left; }
Either should essentially get you what you want. There are additional things to note for either technique, such as overflows when floating or IE7 hacks for inline-block, but that gets you started at least.