Here's the fiddle: http://jsfiddle.net/vhcFw/
Here's the code:
<div style='display:block-inline;height:100px;width:100px;background:red;'></div>
<div style='display:block-inline;height:100px;width:100px;background:blue;'></div>
Essentially, I cannot get the divs to render side- by side (especially when using inline styling). I realise this is a simple mistake, but I cannot figure out how to fix it. Thanks in advance.
Simple syntax error.
Use display:inline-block not display:block-inline
Updated jsFiddle here
See MDN - display properties.
Alternatively, you could also float the elements.
jsFiddle here
simply add float:left.to your style
<div style='display:block;height:100px;width:100px;background:red;float:left;'> </div>
<div style='display:block;height:100px;width:100px;background:blue;float:left;'></div>
You have a few options here to consider. The best choice would be to use a flex container to surround the the elements which will by default render them side by side.
<div style='display:flex;'>
<div style='height:100px;width:100px;background:red;'></div>
<div style='height:100px;width:100px;background:blue;'></div>
</div>
Without a container you can just leave them to their default display which would be as block elements and float them left using float: left;.
<div style='height:100px;width:100px;background:red;float:left;'></div>
<div style='height:100px;width:100px;background:blue;float:left;'></div>
You can also change their display to be inline-block which have properties of both inline and block elements. MDN has exhaustive documentation about the display property.
<div style='height:100px;width:100px;background:red;display:inline-block;'></div>
<div style='height:100px;width:100px;background:blue;display:inline-block;'></div>
Related
I have 2 divs. The first div contains a large sentence. And in the end of this sentence I want to put a word, that is situated in the second div.
But I always get the next line. Here is my example
<div class="container">
<div class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </div>
<div class="content2">snippets</div>
</div>
And I want to get this
JsFiddle
Please do not use div's for content. Change the parent Container to a p-tag (<p>) and the following divs (in this case <div class="content1"> and <div class="content2">) to span-tags (). Their are by default display:inline;.
If it's just content-text without special styling, remove any tags and let it inside the parent p-tag.
I would recommend using the following code:
<p class="container">
Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web <span class="content2">snippets</span>
</p>
Based on your Screenshots, this would fit as a more appropriate solution. Hower as the other Suggested already, you cann still change the CSS if you cannot change the HTML for some reason.
Div is by default a block element. If you want inline elements you should (in theory) use spans.
For example:
<div class="container">
<span class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </span >
<span class="content2">snippets</span >
</div>
Now, if you cannot change that for some reasons you probably will have to change that specific div's css 'display' property to 'inline', though I'd actually recommend against it.
You have to change display from inline-block to inline.
.content1, .content2 {
display: inline;
}
Fiddle: http://jsfiddle.net/4utsx65f/2/
use
.container div{
display:inline;
}
Or use inline elements, like spans instead of divs
Use display:inline for your inner divs: http://jsfiddle.net/4utsx65f/3/
I Guess the second word snippet should be in span as per the requirement.
<div class="container">
<div class="content1">Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web
snippets
check this fiddle Fiddle
make a Css file in your Assets ..
define a class with any name .withen the defination write.
.divOnSameLine{
display:inline;
float:left;
}
make sure to refer the css file in your Document.
then add the class name
<div class="divleft divOnSameLine">Something</div>
<div class="divright divOnSameLine">Something 2</div>
Add 'display: inline-block;' to the content1 and content2 classes in your CSS, or set the value inline:
<div class="container">
<div class="content1" style="display:inline-block;'>Test and share JavaScript, CSS, HTML or CoffeeScript online.. JsFiddle is the playground for web developers, an online editor for web </div>
<div class="content2" style="display:inline-block;'>snippets</div>
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>
I just started out using twitter bootstrap and so far I've had a nice experience.
I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them
But this is what I get
The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.
Here's the html I'm currently using
<div class="container">
<div class="row offset-top-large">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
<div class="row offset-top">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
</div>
The .offset-top classes just add additional margins to the rows
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:20px;
}
I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).
Edit
Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620
Thanks!
Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.
The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.
Try this:
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:50px;
}
Note: bantroth is also correct, adding display:block to your a tags is another solution.
This is basically the site http://funkz.nfshost.com/
The bottom post with <div id="big-post"></div> element is floated to the left,
and the sidebar with <aside id="tab-lists"></aside> element is floated to the right,
but when i add another(or more) <div id="big-post"> element after the first one it moves the whole sidebar down with the post...
I've tried clearing, but nothing helped...I'm pretty sure the solution is simple, can someone help me?
<div class="some_new_div">
<div id="big-post">...</div>
<div id="big-post">...</div>
<div id="big-post">...</div>
</div>
<aside id="tab-lists"></aside>
CSS
.some_new_div{float: left;}
Remove float from big-post and then take a new element, inside that- put big-post element
Right-floated elements have to be placed before other elements, so you have to do something like this:
....
<aside id="tab-lists"></aside>
<div id="big-post"></div>
<div id="big-post"></div>
....
Your <aside id="tab-lists"></aside> element needs to occur before any of the<div id="big-post"> elements.
I've just moved it above the post div in chrome developer tools and could add another post successfully.
right goes over left in this case, your aside needs to be moved up in the chain, in this case above the big-post.
I'm wondering if anybody knows the meaning of this tag I found in a valid html file I've downloaded.
<div style="clear: both;"> </div>
Thanks for help in advance.
It clears the floats from both left and right in order to bring the content after it back into the main flow of the page.
Official definition.
The technique is known as a "spacer div" - the article is now ten years old and at the time this was a good solution to a common problem. It typically appears in scenarios like this:
<div class="container">
<div style="float:left">
...
<div style="float:left">
...
</div>
<div style="clear:both"> </div>
</div>
The inner divs are floated - if you simply left out the "spacer div" the container element would not completely enclose its contents (unless you float it itself, which is often impractical). The is needed in some older browsers (you know which one) to ensure it behaves as expected in all situations, i.e. a simple <div style="clear:both"/> didn't always work - you really needed a div with actual (though invisible and nonsensical) content to make it work everywhere.
It's a working solution to a common problem, but there are more elegant ways to solve this, e.g. using the :after CSS pseudo class. This is more elegant because it doesn't require us adding semantically worthless markup elements that are just there for styling purposes. Another great article with a different solution.
This tag will not allow any float to be place either left or right of this tag.