.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.
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 */
}
Ok, I'm having some more fun with the ::after feature. Here are 2 examples:
With issue: http://codepen.io/anon/pen/zrBJRO
Works: http://codepen.io/anon/pen/LGZJQN
The first example, I am adding the .clearfix class to the div's I want to apply it to:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
However, this doesn't work - and the red bar (which should be showing under the 3rd .link-listing div), simply shows at the top of the page.
On the other hand, if you look at the 2nd example ( http://codepen.io/anon/pen/LGZJQN ) , you can see that this DOES work ... but I've had to go back to using horrible divs to clear them:
<div style="clear:both"></div>
The idea of this exercise, is to try and get rid of as many DOM elements as possible (each link we currently have 2 "clear" divs (sometimes 4, depending on if there is an "offer" on the listing as well), and when there are 50 links per page - thats a heck of a lot of DOM elements we can remove, if this will work :))
I think that the use of floats here is exagerated. Removing the floats you have the same behaviour and you don't need to put clearfixes anymore. Floats are for floating elements, not for layouts.
https://jsfiddle.net/j9oecqp3/
Simply change float for display block
.link-listing {
display:block; /* before was float:left;
}
I am trying to center the footer on a website but for some reason, the way I use that normally works won't work this time. Can anyone tell me why?
Site is here
It's set up using two classes, one inside the other
First one is called mainFoot:
.mainFoot {
background-color: #184879;
width: 100%;
height: 60px; /*had to include this because it would not appear otherwise. browser read it as a 0 height container*/
display: block;
clear: both;
}
Second is page-footer:
#page-footer {
width: 990px;
display: block;
clear: both;
margin:0 auto;}
I was using the same structure right above it for the bottom widgets and it worked as is, but for some reason, while i was setting this one up, I had to set a height property for the outer div to appear as it wouldn't read the inner div's height and adjust.
For reference, he similar set up I mentioned that DOES work is right above the mainFoot class and is controlled by the classes b4Foot and half-widgets:
.b4Foot {
background-color: #277bc1;
width: 100%;
display: block;
clear: both;
}
.half-widgets {
width: 990px;
min-height: 200px;
margin: 0 auto;
color: #fff;
}
To center the contents of a block, you need to set the style "text-align:center". However, note that you cannot center a block-type element within another block-type element. The inner element needs to have the display style of inline or inline-block.
To fix your problem, you need to: a) remove the fixed width, and b) change page-footer to display:inline-block. Currently it is display:table because of the class clearfix - you need to remove that class fromt he div.
you need to change just this line please see below and put on your CSS and see result
.mainFoot
{
background-color:#184879 !important;
height:60px;
width:auto;
}
footer.span12 { color:#DEDEDE; width:100%;}
#page-footer { display:block; margin:0 auto; width:990px;}
only change on .mainFoot , footer.span12 and #page-footer
Thanks,
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;
}
How can I define a width for the label Quantity (see below)? I would like a CSS solution without defining a style on the span but directly on the label.
Something like:
span label[for=Quantity]
{
width: 200px;
}
But the above css doesn't work.
Your adding width to an inline element they wont accept that.
span label[for=Quantity]
{
width: 200px;
display: block;
}
using the inline-block is better because it doesn't force the remaining elements and/or controls to be drawn in a new line
.label {
width:200px;
display: inline-block;
}
you can make label a block element and set float to left so you can put other controls next to it
label {
display: block;
float: left;
width: 180px;
}