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>
Related
I have something like this:
<div id="content" style="visibility: hidden;">
<!-- 500 lines of HTML --->
</div>
This div contain divs that are shown via Javascript. The problem is that it makes my site's height too big even if nothing is shown.
I know I could just add the divs to be generated in the Javascript file, but I wonder if there is a CSS solution, since I like to have the "skeleton" in the HTML instead of the Javascript.
style="display: none" in the css
You can use display:none; instead of visibility:hidden;.
If you want to make it visible again, simply change it to display:block;.
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.
I am redoing my website and have run into an issue. When I use the tabs as <div> elements, I am getting white space in between them. You can use this Fiddle. I have found some of this question on the site, but they all require a width change.
Some of my tabs will be very long, so I would love to not use a set width. Is there any way to do this using only HTML and CSS?
To prevent the white-space issue, you should not use the display:inline property. You should use floats like this:
float:left
EDIT
Other solution with less html and css manipulation : you could use the solution described on this article
<center>
<div id="topnav">
<span class="tabb">Home</span><!--
--><span class="tabr">Arcade</span><!--
--><span class="tabg">Support</span>
</div>
</center>
FIDDLE
Your question is similar to this question, even though that one is using display: inline-block.
If you set #topnav to font-size: 0, the whitespace will go away and nothing else will change because you have a font-size set on the child elements.
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 am pretty new to web design stuff but what I understood from DIV tag is that I it like a logical container for what ever is inside it and those thing will follow its rules..
so now I have an outer DIV tag defined as <div style="margin-left: 10px;" >and I have put some textbox, buttons, comboboxes inside it...now I also have a HyperLink that I want it to be there BUT I want this one to be at the right hand side , aligned to right , so I defined another DIV like <div align="right"> and put the hyperlink insde this one. they are all still inside that other outer DIV tho. but it is not going to the right...what is wrong and how can I fix it? I attached the picture, see I want it to be like this picture, at the right hand side of that combobox...
thanks all
As long as you need to align inline element (your link tag) to the right, you can use text-align property of the style, and set it to right:
<div style="text-align:right">
blabla
</div>
there is no align. Do you mean text-align? That will affect inline elements within block level elements.
Try this:
<div style="margin-left: 10px;">
<p>Reason for Referral</p>
<input type='text'></input>
<div style="display:inline"><a href='#'>Not Found?</a></div>
</div>
Maybe its below the combobox becouse the text is too long to fit in the outer div? that would make it go one row lower.
If you have something like:
<div class='group'>
<p>Reason for Referral</p><br/>
<input type='text'></input>
<div class='right'><a href='#'>Not Found?</a></div>
</div>
Then in css:
div.right {
float: right;
}
You should get something close to the effect you want.