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>.
Related
<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
I positioned two div elements side-by-side by using float= left;
But buttons are getting displayed beside the div elements.
I want the button elements right below the two div elements which were placed side- by-side.
When you use float:left property then the div's height and width are set by either of the following
amount of space it's content html elements require
applied css height and width.
hence say if your screen if too big and space is left out on the sides then the next element (if it can be fitted in that space) is rendered (if it requires more then it would appear on the next line).
hence now regarding your problem there are two possible solution's
Increase the widths of your div so that it takes most of the screen width.(mostly never used as it might look ugly on big screens)
but if u want to go by this approach the setting the width's in percent can do the job.
Fiddle demo
use the clear:both property of css (mostly used)
for it's explanation you have to read it's documentation
i would suggest you go by this approach
Fiddle demo
<div>
<span>oneoneoneone</span>
<span>twooneoneone</span>
<span>threeoneoneone</span>
</div>
By nature it displays "span"s in one line without a break.
<div style="position:absolute;background:red">
<div style="position:absolute">
<span>oneoneoneone</span>
<span>twooneoneone</span>
<span>threeoneoneone</span>
</div>
</div>
It displays the span elements one below the other. I know it's a silly question,but I am curious to know the fact!My question is that why inline elements behave like a block level elements here? Any good guy from stackoverflow...
Because by default a is a block element that takes up the full width of the container it's in. "position:absolute" removes that width. If you set "width:100%;" to the elements with absolute positioning, the spans will again be on one line without a break.
span elements are inline elements which means they will always take up the space on a line before wrapping to the next line.
In the first example you have a normal div which is a block level element that will take up the whole line (100% width). This means the spans will not wrap unless the width is less than all three words.
In the second example, you have an absolutely positioned div. As you have not given this div a width, it will be as wide as the largest non-breaking element inside it - which is one of the words in your span. As the div is now only as wide as a word, the spans will wrap.
This fiddle shows your second absolutely positioned div is only as wide as the largest non-breaking element
Have a look at this to understand block and inline elements
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 have made a simple website and am happy witht he fact that I have had minimal use of div elements. I cannot explain why I do not like using divs, I just dont. That being said I have 2 elements side by side and when the browser shrinks the elements collapse one under the other (it's a paragraph with an image next to it, for ease of picturing).
Other than using position relative and adjusting pixels or wrapping the elements in divs is there a way to prevent two floated elements from changing position when the browser screen shrinks?
you could have a min-width on the container of those two elements. and if they aren't in a div, remember that <body> can also have this min-width
Try to give a width on the container for exampleboth the elements for example say
< class="element-container"> in order to seperate both the elements overlaying on each other.