I want to create a header with a few words aligned to the far left of the header div and a few words aligned to the far right. I initially did this by creating spans (.headerLeft and .headerRight) and adjusting the alignment for the portions I wanted aligned. However, this creates problems if I want a background-color for my header div. Is the best practice solution here to simply add a little inline CSS styling, or is there a better way?
My Code (example)
HTML
<div class="header">
<span class="headerLeft">Welcome to .</span>
<span class="headerRight">Login | Register</span>
</div>
CSS
.header {
width:100%
position:fixed;
top:0;
margin-top:0;
background-color:red;
text-color:#C14000;
}
.headerLeft {
float:left;
text-align:left;
}
.headerRight {
float:right;
text-align:right;
}
#header {
overflow: hidden;
}
This code will fix your problem. The height of #header will automatically take the height from the tallest element inside #header.
Another way would be to manually set the height for #header.
You don't need to style sth inline :)
You need to set the overflow attribute for the header class to force it to wrap around the inner spans. see http://jsfiddle.net/PsychegoPro/rnDT8/
You need to clear the floats in order for the div to have actual height.
This can be achieved by using clearfix. What is a clearfix?
Related
I have a problem that I don't understand. Inside parent div I have a link and I want to fill full parent width.
#changePassword {
width:100%;
height:5.28%;
border-bottom:1px solid #a9aaa7;
background:#3c3c3c;
}
#changePassword a {
width:100%;
height:100%;
background:url(iconPassword.png) no-repeat;
color:#FFF;
font-size:1vw;
text-decoration:none;
padding-left:20%;
}
But only fill text inside link. I've test this width a border.
Anchors are inline elements which means, among other things, that they will only be as big as their contents and horizontal padding.
You can change this by changing the display property in CSS. In this case, you would need to set it to block or inline-block.
More information on the display property
Add display:block to a tag class
DEMO
HTML
<div>Test</div>
CSS
div {
text-align: center;
width:200px;
margin-left:20px;
}
I don't want to have the text at center but pushed slightly right/left. Is this possible?
If it's a single line you should be able to do this:
text-indent:1em;
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
It is possible. Currently your margin-left property will affect the div and does not specifically target the inner text.
I would do something like the following. If you surround the text in a <p> tag you can offset it to the left or right by using padding.
div {
text-align: center;
width:200px;
background:blue;
}
div p{
padding-left:30px;
}
<div>
<p>Test</p>
</div>
If you use padding on one side, it will offset the text visually by whatever you set it to. What you have listed would work, as would using padding instead of a margin, but it depends on what the site looks like visually.
Is a more efficient way of doing this... for some reason I feel like this is an old way of doing this.
I have this page HERE (I'm re-creating a lynda.com webpage for a lesson) and the wrapper doesn't actually wrap around the section id="trailInfo".
In order to do that I would add br class="br_clear" /
Is there a more correct way of doing this? If I add clear=both to the section is doesn't work, I have to add it to the br.
Thanks!
Update your CSS with the overflow:hidden property inside your parent div
#wrapper {
background-color: #FFFFFF;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 960px;
}
Explanation About Clearing floats
A common problem with float-based layouts is that the parent div's doesn't want to stretch up to accommodate the child floated div's. If you will add a border around the parent div you'll have to command the browsers somehow to stretch up the parent div all the way.
Now see the problem as you were facing: demo
its because you didn't clear the floats on that time.
So the Old Solution of this problem is clear:both;
if you will add extra div after the child floated elements like mentioned below code this will clear the floats:
<div class="parent">
<div class="left-child"></div>
<div class="right-child"></div>
<div style="clear:both;"></div>
</div>
New Solution is overflow:hidden;
if you will give overflow:hidden to your parent div this will automatically clear all the child floated elements inside the parent div.
see the new solution demo: tinkerbin.com/WKqFS7Lc
Hi now give to #wrapper overflow:hidden;
as like this
#wrapper{
overflow:hidden;
}
Demo
Add height: auto; to wrapper class. it works
you should use overflow:hidden; property on your wrapper.
#wrapper{
overflow:hidden;
height:auto;
}
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
I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
How can i do this and keep the styles that already have been defined for the footer?
Thanks in advance!
Edit
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).
Could this be the answer you're looking for?
To convert a div to a span, simply add:
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
Quote:
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
Solutions:
Remove empty div(s) from HTML
Remove empty div(s) by adding display:none
Reduce height of the div(s)
Reduce margin or padding of the div(s)
Set position:relative; top:-[yourownnumber]px to .footer
Try adding overflow:auto; to your span. Also add display:block;
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc.
You still need the body to be contained in a block-level element.
How if add this:
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.