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>
Related
I think I cannot do that one in CSS, but wanted to see whether someone would have such a solution...
I have a div with the page content, a div which can be in several different location in the HTML, and a set of paragraphs. The CSS would have to place the second div between two paragraphs.
There is a sample HTML:
<div id="to-be-placed">Move Me</div>
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
Say we want to place the "#to-be-placed" div after the 3rd paragraph, is there a way to do that in CSS? I can reference the 3rd paragraph as so:
content.p:nth-child(3)
But I really don't see a way to tell CSS to move my DIV to that location...
Note: the #to-be-placed div could be inside the #content div, at the beginning or at the end.
P.S. Please, don't come up with hard coded sizes and positions. That won't work.
P.S. Just in case you get all excited about jQuery. I know how to do it with jQuery. So no, I don't need you to give me such an answer. (see How to add div tag in-between two paragraphs when wrapped inside main div using jquery for those who wonder.)
This cannot be done using CSS, as CSS does not provide any mechanism for moving elements in HTML, only for styling existing elements and adding new content through the use of pseudoelements. The best you're going to get is a solution that uses JavaScript or jQuery.
If you only want to add styled text content, you can add that using the ::after pseudo-element in CSS, but it does not support HTML, only plain text:
p:nth-child(2)::after {
content: "- Added content";
}
<div id="content">
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
</div>
You can't do that exactly, but a possible workaround would be to define the div as the ::after element on the 3rd p element. This technically puts the div inside the p, but it might do what you're looking for.
p:nth-child(3)::after {
content: "Move Me";
display: block;
}
Here's a fiddle: https://jsfiddle.net/me5su05f/1/
Short answer: No you cannot do that. CSS (Cascading Style Sheet) is designed for styling. It is not designed to be used to manipulate DOM elements. JavaScript on the other hand is built for doing that. So if you happen to be wanting to use CSS for manipulating your DOM then you might want to re-think your approach to the solution.
Hi guys so I'm new to all this html stuff.
Basically;
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick
When i do this the text shows up under the button. I want it next to the button (right)
How can i do that?
I'm afraid you need to spend a bit more time learning about this. Realistically you'll need to use CSS to style the HTML that is output by your Javascript.
Both CodeSchool and Codecademy have great tutorials on learning the basics of HTML, CSS and Javascript. You'll need to learn these basics if you want to do this sort of thing yourself.
https://www.codeschool.com/
https://www.codecademy.com/
I've copied your example into a CodePen, which helps to show you the roles played by HTML, CSS and Javascript. As an example, the CSS could be;
http://codepen.io/tombeynon/pen/rVQvMO
button{
float:left;
margin-right:5px;
}
#demo{
float:left;
}
Add display:inline-block to p tag
Try this.
<button onclick="myFunction()">Click me</button>
<p id="demo" style="display:inline-block"></p>
Fiddle:https://jsfiddle.net/9yqs14p4/
First of all you have to know, that in HTML there are inline elements, e.g <span> and block elements, e.g <div>. That means, what the word says.
You can test the difference:
// block
<div>div1</div>
<div>div2</div>
// inline
<span>span1</span><span>span2</span>
In the example is used the <p> tag which is a block element. Therefore
you see the text below.
<button> is an inline element. If you simply use a span:
<span id="demo"></span>
it works!
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've got some HTML:
<div id="thing">
<div id="contentheader">
<h3>Header</h3>
</div>
<div id="contentcontainer">
<div id="image">
<img alt="balt" src="imagesrc">
</div>
<div id="body">
<p>hegl gegl</p>
</div>
</div>
</div>
I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.
Perhaps an image will demonstrate better:
As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.
Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)
I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.
If you're open to using javascript the following non-framework snippet would work.
// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);
You could recreate this code as a neater, one-liner using jQuery or another javascript framework.
Sure, heres the Css for a rudimentary setup:
http://jsfiddle.net/Nkapr/
Ask if you have any questions.
The problem here is the HTML structure, it's not been written really with your goal in mind (which is a bummer!)
If all you're after is pushing the H3 container 'contentheader' down in line with the rest of the stuff inside 'contentcontainer' you could set a negative top margin on 'contentcontainer' to pull it upwards, and then add a positive top margin to the elements in 'contentcontainer' which need to go down (in this case 'image') giving the impression that the h3 section actually sits in with the rest of the content. It's a bit of a hack but it might do the trick if you can't alter the HTML.
Thirtydot's answewr in the comments section solved my issue.
I have the following page structure
<div id ="site-wrapper">
<div id ="banner">
<div id="menu">
<center>Menu Goes Here</center>
</div>
</div>
<div id="content">
<center>Content Goes here</center>
</div>
<div id="sidebar_r">
<center>Right sidebar</center>
<div id="sidebar_top">
Sidebar top
</div>
<div id="sidebar_middle">
Sidebar middle
</div>
<div id="sidebar_bottom">
Sidebar bottom
</div>
</div>
</div>
How do i structure the css . I have used ids for all of the divs is there a better way to do it?
htmldog's css for beginner
Have a look at the html5 spec - http://www.whatwg.org/specs/web-apps/current-work/multipage/
You can make use of elements such as "header", "footer", "nav" and "section". this will reduce the amount of id's you have to set in your css and make your markup more semantic.
also, having lots of css selectors stacked will have a performance hit.
In regard to you question!
an example css structure could be..
#menu center { ... }
#sidebar_r center { ... }
try not to go mad like
#site-wrapper #banner #menu center { ... }
your css parser has more work todo and your css becomes less manageable if you wanted to rename say #site-wrapper to #container.
my rule of thumb is..
use an id if the element is a container or only appears once.
use a class if the element appears more than once such as li's.
make use of tags, i only use an id or a class if its required. you can always add it later.
I would suggest replacing your <center> tags with <span> tags instead, then applying a text-align:center style in your css. As far as structuring your css... it depends how it should look. Can you be more specific?
Download some of these templates and study how they setup their sites layouts:
http://www.freecsstemplates.org/
http://www.templatemonster.com/free-templates.php
ya you can use both ID and Class for css but remember one thing that ID has better specificity than class.So whenever you are using class you can use multiple classes at a time but if you are using ID then you can use one ID.For better CSS after writing your css make it validate through w3c css validator.
To know the css specificity check this link and decide what will be your css.
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
At the simplest, all you need to use is:
#sidebar_r {
float: right;
}