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;
}
Related
I am using <div> to create a horizontal bar across the screen. Within that horizontal bar, I have 3 more <div> each of a different width. They are supposed to be all in a row horizontally next to each other. Instead, they are on top of each other. How do I fix this?
Also, if I don't have any text within the <div> in my HTML code, the <div> does not appear. Ex: <div>anything</div>
JSFiddle
You can add css float:left to div and If you also don't want any text in div you should add css height to div.
.horizon div{
float: left;
height: 20px;
}
like this http://jsfiddle.net/KG5B3/
Just use a float, which IS cross-browser compliant. Also you should clear your floats which can be seen on the updated JsFiddle
.horizon div{
float: left;
}
Fiddle
You can float those inner DIVs. You can also use inline-block (not shown).
<div class="horizon">
<div class="left">left</div>
<div class="mid">middle</div>
<div class="right">right</div>
<br style="clear: both" />
</div>
body {
margin: 0;
}
.horizon {
background: #000000;
width: 100%;
}
div.horizon div {
float: left;
}
.right {
width: 25%;
background: #ff0000;
}
.mid {
width: 50%;
background: #00ff00;
}
.left {
width: 25%;
background: #0000ff;
}
I know this is kind of a stupid doubt about floating CSS layout, but I can't find the answer anywhere.
I want to have a simple page, with a big red reactangle in the middle, and 2 blue squares within, one on each side of the rectagle.
I have the following HTML code:
<body>
<div id="rectangle">
<div id="left"></div>
<div id="right></div>
</div>
</body>
and then I have this css:
#rectangle {
width: 600px;
margin: auto;
padding: 50px;
background-color: red;
}
#left {
float: left;
width: 250px;
height: 250px;
background-color: blue;
}
#right {
float: right;
width: 250px;
height: 250px;
background-color: blue;
}
And this doesn't work, because the red rectangle doesn't adapt its height to cover the blue squares because they are floating I guess...
The only way I know to solve this is adding a new
<div id="footer"></div>
at the end of the rectangle div, with style
clear: both;
and I'm sure there should be a more elegant way to do this, isn't there?
Simply add overflow: auto to the #rectangle div.
Example: http://jsfiddle.net/ZVJQN/
add clear div
<div id="rectangle">
<div id="right"></div>
<div id="left"></div>
<div class="clear"></div>
</div>
.clear
{
clear:both;
}
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.
I'm trying to fit three images inside a div, but I'm having trouble getting them to align properly. This is what I have in mind:
alt text http://img245.imageshack.us/img245/2016/divsf.jpg
But I can't for the life of me figure this one out. Can anyone please lend a hand? Thanks!
http://jsfiddle.net/tMxkX/2/
CSS
div#container {
width:400px;
height: 400px;
padding:50px;
background: red;
}
div.leftbox {
float: left;
width:175px;
height: 175px;
margin-bottom: 50px;
background: blue;
}
div.rightbox {
float: right;
width: 175px;
height: 400px;
background: yellow;
}
HTML
<div id="container">
<div class="rightbox">
Right Image Box
</div>
<div class="leftbox">
Left Image Box Top
</div>
<div class="leftbox">
Left Image Box Bottom
</div>
</div>
If changing markup is allowed, I propose to wrap img 1 and 2 in another div - then it is just a matter of floating the div to the left.
I'm sure this a common problem, but couldn't find the exact answer :)
I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
your margin-left of #content should include the width of #left_menu. Thus should be
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
You also don't need a position:absolute for your #main (unless other purposes)
So finally:
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c is to clear and pushes the bottom content off the floats.
What about this its all to do with your width on your container.
This works for me.
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
you will need to 'float' the main div, or use a clearing <div> or <br> after your content and left menu <div>s.
The problem is not "staying on the same level", but it's about the size of the container div.
This might help you: http://archivist.incutio.com/viewlist/css-discuss/63079
The nicest and easiest thing to do is to set overflow: hidden on the container, #main. I don't think this works in IE6 though.
try giving the main div an overflow: hidden; and taking away it's position: absolute;
which will give it a height equivalent to the greater height of the floating divs
Also, I don't know if you copied it from your page, but you're missing a close quotation in your left_menu id=""
#main{
display:inline-block;
width:100%;
}
and remove absolute to the parent;
#left_menu,#content{
....
vertical-align:top;
}