I am learning HTML. I was reading the <div> tag in a book. I understand how it breaks the website into vertical pieces but I have also seen examples where people use <div> tag at the sidebar. How does the <div> tag work horizontally?
To have them so they are side by side, you need to use CSS. A div element by default has the display property set to block. So therefore elements after it will usually appear below.
To setup a couple columns lets say you have the following:
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
You can setup the columns by applying CSS rules to the classes:
<style type="text/css">
.container {
width:500px;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
</style>
In short, im giving it a container to have a maximum width. It's not required, but generally done this way. Then I set both divs to be half the width of the container, and i put float left on it. So all elements will stick beside it. The float right is optional. However, if you make the container wider, the right div will stick on the right hand side.
It is considered a block element and has a width of 100%.
I'd suggest you try it in a text editor & your browser by adding a background-color and some content in it.
Related
My prime objective was to create webpage with a heading with a border, and text underneath it which is as wide as the border of the heading (so if the heading with the border is 500px, then the text underneath should be directly underneath it, ie have a width of 500px).
I have used text-align: center; in the body tag already, so as to align the heading of the webpage to the center. I assumed everything written in the body tag would be centered automatically since they are all nested in body.
Inside the body, for the actual text written in the page, I've used a <div class="content"> container. I know that it has been applied satisfactorily to the actual text because all other formatting applies onto it as expected.
However, when I write width: 500px; inside the .content{}, the text suddenly goes into a left alignment. I tried to use text-align: center; in the .content{} class too, but even that didn't align the text in the center.
What am I missing here? Why isn't the actual text being displayed in the center, directly underneath the heading?
Thanks in advance!
For div tag when you set a width you also need to say that the div is no more block but inline-block elsewhere it becomes a block with the specified width. So one of these solutions works:
.content{
width:500px;
display:inline-block;
}
or
.content{
width:500px;
margin:auto;
}
You have given the div a specific width in pixels. To make sure it is centred within your page you should apply a margin:0 auto css rule to it so that it will automatically calculate the side margins to center the element.
Be aware that the margin:0 auto technique does not always work. Here are the rules for it to work:
The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position
The element must not have auto as width value
I'm trying to achieve something simple and the rules make it non-trivial. Here is my fiddle. It is non-trivial for me to align the elements in a natural way, I think the elements should be on the same row when I make a float:left.
Hx elements have default margins.
The "space" from the top cause by the margin-top property of the H1 element.
Consider using a reset.css file to reset those default values.
Another thing is the line-height property.
In conclusion:
margin-top:0;
line-height: 20px; (choose a value that fits to your needs)
http://jsfiddle.net/ynrmwgt9/4/
I would recommend to wrap your div in a container div. A little bit like bootstrap system.
See the fiddle, and ask me if you have questions about :)
I'm using something like this :
<div class='row'>
<div class='col'>Content 1</div>
<div class='col'>Content 2</div>
</div>
The stylesheet has to specify that rowfill 100% of the width, and your two columns, the half, then 50% each.
.row
{
width:100%;
}
.col
{
width:50%;
float:left;
text-align:center;
}
Text align center is just for make it beautiful
http://jsfiddle.net/ynrmwgt9/2/
I have run across this problem from time to time and have never been able to understand what causes it.
<div id="wrapper">
<div id="primary">content</div>
<div id="secondary">content</div>
</div>
#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}
And then you look at the properties on Chrome's inspect element and the wrapper div shows up as 0px height and 0px width.
This is commonly referred to as the clearfix issue. An alternative to placing an inline-styled div below would be to assign overflow:hidden to the wrapper div.
For more information about clearing issues, check out A List Apart: CSS Floats 101 (Section 6: Collapsing specifically)
You need to add a <div style='clear:both'></div> below the <div id='secondary'/>. The CSS tag "float" does not allow the parent to see where the children actually end. Adding the div that clears the left and right sides of any floats allow the parent element to fill the space correctly.
You need to try and clear the div with the float, so try these, adding a <div> after the second div, and adding style="clear:both" to the div i just said to create as the style, or you can simply specify the exact height & width of the wrapper div, let me know what happens please. good luck!
Can someone take a look at the following fiddle: http://jsfiddle.net/R4bCy/1/
I thought that a div should adjust it's height in order to accommodate it's elements, unless the elements are positioned absolutely.
Why does the div not expand to the full height of the image?
I need to the image to be aligned to the right. The only ways that I know how to do this is align='right', position:absolute; right: 0; and float:right, all of which make the containing div not adjust it's height to the image height.
.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
.img{
float:right;
height:auto;
}
<div class="intro">
<div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div>
<p>Sorry, but the page you requested could not be found.</p>
</div>
DEMO
'Why does the div not expand to the full height of the image?'
Because floats will overlap with blocks, only block formatting contexts contain floats. (You can find a pretty good overview of the whole topic here: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ )
On to solve the problem at hand:
The align=right will actually result in the img being float: right (the align attribute is deprecated and css should be used).
To contain the floated image in its parent div you need either have the parent div establish a block formatting context (block formatting contexts enclose nested floats) or explicitly clear the float with an additional element after the img that is styled as a clear: right.
An easy solution to create a block formatting context is to float the parent div as well, although my preferred solution in this case would be to simply set its overflow to hidden (also resulting in a block formatting context).
Check out the updated fiddle http://jsfiddle.net/R4bCy/8/.
What you need to do is add after the p tag,
<div style="clear:both;"></div>
Whoops, apologies, posted and you edited your question - the align right is floating it I believe (you should instead use float:right and a clearfix of some sort).
example: http://jsfiddle.net/R4bCy/5/
This is what I believe you want:
http://jsfiddle.net/R4bCy/6/
If you wanted the text on the left and the image floated to the right, please do this is your CSS:
http://jsfiddle.net/R4bCy/15/
You can also have two divs that have a width of 50% contained within a container div. This will allow you a little more flexibility in your placement of the image because the text and image will each have their own modifiable divs with independent attributes
I'm trying to put div elements right next to each other. The problem is, even if there is enough room for the two elements to be on the same line, the new div moves itself to the next line, I need the other div only to go to the next line if there isn't enough room.
Does anybody know how to do this?
Set the CSS display style to display:inline-block;.
This allows the element to keep it's block-like functionality, while also allowing it to be displayed inline. It's a half-way house between the two.
(But note that there are some compatibility issues with older versions of IE)
Divs are block level elements, so by default they will always occupy an entire line. The way to change this is to float the divs:
<div style="float: left"></div>
Use float's and margin's; that way when there's no space you can just put overflow:hidden to the container hide the rest of the div instead of making it go to the next line.
CSS
.container {
width:500px;
background:#DADADA;
overflow:hidden; /* also used as a clearfix */
}
.content {
float:left;
background:green;
width:350px;
}
.sidebar {
width:155px; /* Intentionaly has more width */
margin-left:350px; /* Width of the content */
background:lime;
}
HTML
<div class="container">
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
In this demo you can see: floats, margin+floats, display:inline-block.
Demo here: http://jsfiddle.net/kuroir/UupbG/1/
You need to use float CSS rule. Just use some class or identifier and set float to left or right.
Make sure that you have a fixed width to the divs