<p class="main-title">text here</p>
So, my error is, that this simple line of code always gets 100% width for no reason. The same is for all my text elements. The Container it is in hasnt got any display state (so block) that could make the error.
If I set the width to like 150px there is something like margin still there.
Thanks for your help
Most browsers will display the p element as block. And block elements, by default, don't stack on the same line than others.
So even if you put it at width 150px, the next element will always go next line.
To solve it either :
display your p as inline-block (or just inline if you don't need to resize it)
replace your p with span
use float to ask that your blocks stop pushing others
Related
As you see, I'm trying to put two <p> in one line. What am I doing wrong?
You look for the width of the div you putting the two P's if the width of the div is less than the width of the two text then the second P will automatically move to next line if div size large then you apply float property of css on div with position relative
Make the container bigger. Or the font smaller so it fits in one line.
<p>s are, by default, block elements, so they aren't normally displayed inline.
To fix this, you have to add display:inline; to the style tag in each of your <p>s.
If this still doesn't work, that means that the containing <div> isn't wide enough for both of them to be side by side.
Which means that you have to increase the width of the <div>.
Please see this pen for an example of my problem http://codepen.io/MarkRBM/pen/EmlJC
I cant get the 3 divs that say book now, subscribe, contact to display inline with the div with with the header and paragraph. I have been trying for a while and looking at learn layout.com. This is part of a larger project and I have tried to float it but it messes up the styling of everything else if I do that so I figured there must a way with inline block
edit I have updated the pen with the full scss file the css in question is on lines 866-894. There may be too much going wrong for you to figure it out and if so thats not a problem I will keep plugging away at it.
Yes, it's certainly possible, and you're on the right track. Just a few errors in the css:
First, .locinfo is inline-block, but it's inside .loc, which is not (so it's block by default) — so set .loc to inline-block as well.
You're also missing a semicolon after inline-block in the definition of .locbook, which is causing that rule to be ignored.
Without knowing exactly what you want the result to look like, I'm not sure if there's more that needs fixing. But those changes seem to get at least most of the way there.
Edit: more detail in response to comment:
.locinfo is alone by itself in its container, so set its width to 100% instead of 49%. The key is that this is the element's width as a percentage of its container. Its container (a .loc) has 49% of the page, so if you give .locinfo 49% of that, it will only have 24% of the page.
Similarly, set .locbook to 32%. Those three divs will then lie side-by-side in their container's 49% of the page.
Finally, set vertical-align: top on .loc and margin: 0 on .locbook, and you'll get everything nicely aligned to the top.
you forgot to add semicolon after display:inline-block
.locbook{
/*width: 49%;*/
background-color: #3475b3;
display: inline-block;
vertical-align: top;
}
You might try switching them to spans. Div's are by default {display: block}, while spans are {display: inline}. Block elements cannot be placed on the same line as other elements. Inline elements' width cannot be specified however, in which case you'll want to style either div or span, whichever you choose (it doesn't really matter) to {display: inline-block}
What is the default behaviour of a div?
I noticed that even if a put a width for a div let's say 100px,
if i put a 2nd div with the same width will put it on the second line.so by default doesn't matter the width. it puts it on different lines?
in this case i understand the need of float.
I thought that any element i put in a html page,they will be side by side unless i add a break element or paragraph or something with that role.
Or maybe i do not use it correctly the div for this kind of alignment,but i really want to
clarify this for good.
A div element is, by default, display: block.
This value causes an element to generate a block box.
The rendering of them is described here
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context.
and then here
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
To stop this kind of rendering, you can use float to cause block level elements to bubble up beside each other. You can also modify the display property of the div.
Divs are block-level elements which mean they stack...like blocks. Although it sounds reasonable that since the width would allow them to fit side-by-side without a float, this is not how they are designed to behave.
If an element is an inline element as opposed to a block, its behavior is to fit side-by-side. You can force this behavior on a div if you would like by tying the two ideas together. You can do something like:
<div style="display:inline-block"></div>
This will allow the div to maintain its other block properties but allow it to fit inline as text and images would and, if this the your desired goal, avoid the use of float.
The DIV by default takes 100% of the screen, even if you set it width the space on the right cannot be occupied by anything.
Try this:
The way to have two div on the same line would be to make them float:
<div style = 'float:left;width:500px;background-color:red;color:white;'>Hey</div>
<div style = 'float:left;width:100px;'> There</div>
I was trying for display:inline property and I found same question for which I was looking....and here I got this answer, it makes me very clear ....but I am not clear about these lines ...
Basically margin, padding and border
can be set on inline-level elements,
but they may not behave as you expect.
The behavior will probably be OK if
there's only one line, but other lines
in the same flow will likely exhibit
behavior different from your
expectations (i.e. padding will not be
respected).
so please anybody can make me clear about these lines...I have also tried for display :inline here
You cannot set height, margin-top, margin-bottom, padding-top and padding-bottom on an inline element. You can set margin left and right an padding left an right.
You can set with on an inline element but then it will behave like a block element: See here
Inline Elements will always be displayed next to each other as long a they fit next to each other.
yes inline element behave differently other then block element. the main point of inline element is that is doesn't take vertical margin & padding.
inline elements like a, span
you can give inline-block instead of inline
this is a best example related to your question
http://www.maxdesign.com.au/articles/inline/
EDIT
yes, padding-bottom pushing the inline element down but it's not add any width to your inline element means when the content move to new line it's going to overlap each other & in block element margin, padding & border are adding width,height & space the block element
check these link for more
http://reference.sitepoint.com/css/inlineformatting
with this property set (display:inline) you can't set width and height of your element. Margin, padding & border is ok. I'd use floating instead, but that's because it gives me more flexibility sometimes. =]
It is saying that if you have an inline element that goes all the way to the right of the page and then wraps around to the left (for example, a single line of text that takes up two lines of space) then you may have unexpected consequences. In particular the padding may not display as desired.
An inline element, when it doesn't break on to multiple lines, respects left/right padding - so you see the padding-left and padding-right inside the left and right edges of the element respectively.
When the inline element does break on to multiple lines, the padding is somewhat respected, in that again both left and right inside edges of the element have padding. The part where it isn't respected is exactly the part where the element breaks, the break-point doesn't have any padding because it simply spreads itself onto the next line.
A block element on the other hand, does respect padding properly because it adds the padding and the contents of the element break inside that padding.
Here's a quick image to help explain what I've explained:
I'm working on a jquery slider, except instead of using a fixed-width container, I'm using the whole browser window. I've got jQuery set up to fix the margins to make sure it's centered correctly (although I just made them 500 pixels in the demo to keep it simple), but the problem is when I try to add more divs, it puts them on a second line instead of putting them beyond the edge of the browser. Here is my code: http://jsfiddle.net/JsPZT/
Eventually, I'll change the overflow so that they are hidden when they are beyond the edge of the browser, but for now, I just want to know that they are on the same line and not being pushed onto the second.
So my question is what should I change in the CSS to make sure the divs are always on the same line, even if it means pushing them beyond the edge of the window?
To get divs to stay on the same line when they are off of the screen, you have several options. Here's what I can think of off the top of my head.
Make the parent container always large enough to hold the divs you want to float. Theoretically, they shouldn't jump down to the next line that way, but I haven't tried it myself.
Another option is to use a combination of display:table and display:table-cell on the parent and children divs respectively. You just have to make sure you are supporting the browsers you want to support.
My last idea is to set each div with position:absolute. Then, just adjust the left attribute to 100% * x to place the div off the screen to the left or right. Depending on what you are trying to do, when they are off the viewable area you could just leave them at left:-100% or 100%. The same should work for the top attribute if you want the div to be off the screen above or below the viewable area.
Try white-space: nowrap;
If that doesn't work, you will probably need an inner div with a width that's the sum of all contained divs.
You need to add a width to your #track CSS. That is your wrapper, and without a width on that, the items will just overflow and drop to the next line. You'll probably have to add another div to set the overflow and get everything positioned correctly.