I have this basic HTML structure:
<div id="left-column"></div>
<div id="content"></div>
<div id="right-column"></div>
And this css:
#left-column
{
padding-top: 25px;
width: 80px;
background: url('../../common/images/black70.png');
height: 100%;
float: left;
margin-right: 5px;
}
#content
{
padding: 5px;
}
#right-column
{
padding-top: 25px;
width: 190px;
background: url('../../common/images/black40.png');
height: 100%;
float: right;
}
The problem is content padding is being propagated to right column:
How can I avoid this?
Thanks
The problem is your #right-column is after #content so in the document flow, it will start after the content, which has 10px height from its top and bottom padding.
If you re-order your HTML like so, it fixes your issue.
<div id="left-column"></div>
<div id="right-column"></div>
<div id="content"></div>
Here's a jsfiddle
If you've got floating things and non-floating things, the floating things should always come before the non-floating ones in the source.
In your case, the content is rendered first, and then the right-column below that.
Related
Here is an image that illustrates my goal:
http://imgur.com/80v5bRk
What would be the best way to achieve a style that looks like this? By this, I am asking, how can I set up rules so that the spacing and locations of the buttons are perfectly aligned in the center (they are not aligned correctly right now). I was thinking of a div that wraps the whole thing together, a div that floats left holding the first angle and the title, and a second div that floats left holding the icons. The icons are from the font-awesome package and I do not understand how to align them correctly.
Something along the lines of this should do:
HTML:
<div class="bar">
<div class="first button"></div>
<dic class="second button"></div>
</div>
CSS:
.bar{
width: 960px;
height: 60px;
margin: 0 auto 0 auto;
padding: 5px;
}
.button {
width: 50px;
height: 100%;
float: right;
margin-right: 10px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center; /* This is what will centralize it vertically and horizontally */
}
.first { background-image: url('image.png') }
.second { background-image: url('image2.png') }
I hope this helped.
Well, its hard to answer it exactly unless you post what you currently have.
However, your on the right track.
What I would do:
Wrap the whole thing in a div (as you said)
float the text left (which you said as well)
float the icons right (not left)
As far as spacing, put a margin/padding left/right to the two buttons.
EDIT:
As per my discussion with Luiz Berti:
You are almost right.
Try this instead:
http://jsfiddle.net/GYPK5/1/
HTML
<div class="bar">
<div class="text">Lots of stuff here</div>
<div class="buttons">
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/page-white-edit-icon.png" />
<img src="http://icons.iconarchive.com/icons/led24.de/led/16/bin-closed-icon.png" />
</div>
<div class="clear"> </div>
</div>
CSS
.bar {
width: 400px;
border: 1px solid black;
height: 20px;
font-size: 16px;
line-height: 20px;
}
.text {
margin-left: 20px;
float: left;
width: 200px;
}
.buttons {
float: right;
margin-right: 20px;
position: relative;
top: 2px;
}
.buttons img {
margin: 0 10px;
}
.clear {
clear: both;
width: 0;
height: 0;
}
I'm working on a webpage, and i have the width of my div tag set and am using margin: 0 auto; but my content is still on the left. I'm using OS X 10.7.3, Chrome 19.0.1084.46, and Dreamweaver CS6
here's my CSS:
#charset "UTF-8";
body {
text-align: center;
display: block;
}
.container {
float: left;
height: 2000px;
width: 964px;
margin: 0 auto;
text-align: left;
}
.header {
float: left;
height: 117px;
width: 964px;
}
.leftcol {
float: left;
height: 1715px;
width: 534px;
margin-top: 20px;
margin-right: 10.125px;
margin-bottom: 20px;
margin-left: 30px;
}
.navbar {
float: left;
height: 69px;
width: 964px;
}
.rightcol {
float: left;
height: 1715px;
width: 306px;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 20.25px;
}
.video {
float: left;
height: 301px;
width: 534px;
}
.pagebody {
float: left;
height: 1749px;
width: 920px;
background-color: #FFF;
margin-top: 0px;
margin-bottom: 21.25px;
margin-left: 22px;
}
And the HTML that uses the CSS:
<body>
<div class="container">
<div class="header"><img src="Images/Top.png" width="964" height="117" alt="Intelligentlemen Films" /></div>
<div class="navbar"><img src="Images/RibbonMenu.png" width="964" height="69" alt="Navbar" /></div>
<div class="pagebody">
<div class="leftcol">
<div class="video"><iframe width="534" height="301" src="http://www.youtube.com/embed/kMBEuol6aUc" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="rightcol"><img src="Images/intelligentlemen button.jpg" width="300" height="61" alt="Intelligentlemen" /></div>
</div>
</div>
</body>
</html>
First of all,
You can't float left and margin auto horizontally. What's the point anyway. You want to have your container centered, not pushed to the left side.
Now that gives you trouble probably, because things don't work out as you'd want them to, because every other element you have there, is floated to the left.
Elements like your header and navbar shouldn't even be floated, they would be perfectly fine even if you didn't float them, they just need to be cleared. You need some reading to do.
Bottom line. When you're floating, you need to clear your floats after you're done with them.
Here is your reading material:
If it's the only thing you do, read at least The Great Collapse on CSS Tricks, but I'd suggest reading through it (and search for more, until it sticks)
http://css-tricks.com/all-about-floats/
http://www.alistapart.com/articles/css-floats-101/
http://www.positioniseverything.net/easyclearing.html
Floats are very important to understand.
p.s. Don't define height on your container, you want that to be flexible, don't you ? I know you're defining the height, again, because you don't understand CSS floats fully. That's why you need to do the reading :)
Good Luck :)
Because you’ve also applied float: left;.
You should also start your source with a doctype declaration, such as <!doctype html>, and ensure your HTML is valid, as well as your CSS.
I am having a problem with what i think is my style sheet. My site page seems to be set up fine:
However, when i view it in a browser the middle document is out of line:
Could there be anything causing this to happen? it leads me to think maybe something in my css file is? But what? :(
My css file is as follows:
div.left
{
float: left;
width: 15%;
background-color: white;
}
div.right
{
float: right;
width: 40%;
background-color: white;
}
div.center
{
float: left;
width: auto;
background-color: white;
text-align:center;
}
That's most probably due to your floating elements and since the center div is not floated at all, but rather "pushed" to the middle by the float:left of the left div.
If your div's in the html are like:
<div class="parent_div">
<div class="left"> left </div>
<div class="center"> center</div>
<div class="right"> right</div>
</div>
Try floating the center div to the left also, and it should do the trick
div.center
{
float: left;
width: auto;
background-color: white;
}
I have a container div and would like to place three div tags within the center div, I have the XHTML correct, but what I am having trouble in is, well, centering the three divs within the div.
I will now show the code.
XHTML 1.0 Transitional (HTML)
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="contentbox">
</div>
<div id="contentbox">
</div>
<div id="contentbox">
</div>
</div>
</div>
Cascading Style Sheet (CSS)
#container {
width: 900px;
height: inherit;
margin: 30px auto;
}
#content {
float: center;
width: inherit;
height: inherit;
margin-left: auto;
margin-right: auto;
position: absolute;
}
#header {
margin: 0 auto;
background-image: url(images/logo.png);
background-position: center;
width: 250px;
height: 250px;
}
#contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
background-image: url(images/contentbox.png);
}
To see an example of what I am trying to do, please visit http://www.noxinnovations.com/portfolio/hfc/
I want to know how to center those three content boxes within the content div.
Thank you very much,
Aaron Brewer
Check if this is what you want :
http://jsfiddle.net/65WHf/1/
Note that ID's are supposed to be unique, and there's no such thing as center floating. To center a div, you must ensure it's positioned relativelly to it's container (wich is the default behaviour of most browsers of my knowledge) and make use of the followinf syntax :
.something {
margin: 0 auto;
clear: both; // instead of float
}
Hey,
float: center; won't work. There's no such value for the float property.
use this instead for the #content css
text-align: center;
hope that helps.
You could always do something like this:
HTML:
<div id="container">
<div id="header"></div>
<div id="content">
<div class="contentbox"></div>
<div class="contentbox"></div>
<div class="contentbox"></div>
</div>
</div>
CSS:
.contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
border: 1px dashed #999; /* just for visuals */
margin: 0 10px; /* just for visuals */
}
You definitely want to stay away from IDs as a general practice, do you can use them with javascript (jquery, etc) libraries. Plus it's cleaner that way.
Basically I'm laying out a website and I'm using DIV's to have a header, left-column, right-column and footer. I want to have the content section of the website expandable to the html/text inserted into it so i have been using height: auto.
I'm using background images for the top of the header, bottom of the footer and a 1px high filler for the body of the website.
My problem is everything I have tried essentially eliminates the middle background image if I try to have the right-col to the right of the left-col and not under it.
I'm sure this is probably something pretty easy but I have been on it since last night and I'm about up done trying to figure it out.
it's valid XHTML and CSS (except for jQuery UI stuff that is CSS3, though that shouldn't matter structurally).
Any ideas or could someone point me to a tutorial on how to get a two column layout using background images?
<body>
<div id="top">
THE TOP IMAGE GOES HERE IN CSS
</div>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="content">
<div id="left-col">
</div>
<div id="right-col">
</div>
</div>
</div>
<div id="bottom">
THE BOTTOM IMAGE GOES HERE IN CSS
</div>
<div id="footer">
</div>
</body>
#wrapper {
margin: 0 auto;
width: 838px;
background-image:url('../images/wrapper_bg.gif');
background-repeat:repeat-y;
}
#header {
width: 818px;
color: #333;
padding: 10px;
height: 100px;
}
#navigation {
width: 838px;
}
#content {
width: 838px;
color: #333;
margin: 0px 0px 0px 0px;
/*min-height: 800px;*/
height: auto;
}
#footer {
width: 838px;
color: #333;
text-align: center;
}
#top{
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_top.gif');
}
#bottom{
clear: both;
margin: 0 auto;
width: 838px;
height:14px;
background-image:url('../images/wrapper_bottom.gif');
}
#left-col{
margin-left: 20px;
width: 590px;
float:left;
height: auto;
}
#right-col{
width: 170px;
display: inline;
height: auto;
margin-right: 25px;
color: #777777;
font-size: 15px;
padding: 5px;
font-weight: bold;
}
http://www.wholehealthconnect.org/home.php is the website.
Can anyone help me get the middle div to expand to content as well as have the right col next to the left col and still have the background image behind them?
I am not sure I understood your problem correctly, so do not hesitate to point me in the right direction.
Basically you want the links: FAQ, Professional ... Facebook to show up on the right ?
Why not use a classic:
#right-col {
float: left;
margin-left: 610px; /* or perhaps higher */
}
Am I right on track or did I not understood the problem you were stating ?
Add overflow:hidden to #content. Should do it.