This code should work (in my opinion) but, I ca't figure out why it won't. Thanks in advance
<body>
<div id="wrap">
<div style="margin:auto;"><img src="logo.png" alt="logo"/></div>
</div>
</body>
</html>
EDIT:
I'm trying to center it. It stays in the upper left hand corner. Adding a height and width of auto to both divs also did not work.
If you want to horizontally center the logo then you have to also specify the width of the containing div. Here is a sample code.
<html>
<body>
<div id="wrap">
<div style="width:100px; margin:0 auto;"><img src="logo.png" alt="logo"/></div>
</div>
</body>
</html?
The inner div must have a set width for the margin auto to work.
you need to check 2 things before you set your division's to center.
Doctype : check whether it is not in quirks mode.
Width of inner div must me less that width of parent div.
do check these things you will get your answer...All the best.
Is the width of the inner div less than the width of the #wrap div?
I imagine that the wrap has a set width, the div holding the image will need a set width as well.
Fiddle so you can see that it does work. (a bit overkill for this question, I know :) )
Related
I'm a beginner when it comes to HTML and CSS and I'm struggling to position some div elements as described in the image intended outcome. I've centered the table with margin-left: auto and margin-right: auto. I want the text div-element to be aligned right above the table. Is there any good way to do that?
Any help is much appreciated.
Put them both in another div that will be centered inside the box
Set the table width and the div width.
<div id="wrapper-div" style="margin:auto; width:XXpx">
<div id="text-div" style=""></div>
<div id="table-div"></div>
</div>
The wrapper div should have the same width as the table div.
There are many ways to do this, as you are trying you can try adding the following css style:
display:inline-block
HI, can someone please help me with this. I have:
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.
However the parent div actually has to also float left ie.
<html>
<body>
<div style="width=100%; float:left">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
This breaks it. Is there a way to get it working again with the parent div float left?
if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.
Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.
http://jsfiddle.net/robx/cpFUV/
It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.
You wrote width=100% instead of width:100% - fixed example:
<html>
<body>
<div style="float:left;width:100%;">
<div style="float:left; background-color:Red; height:100px;">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).
Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.
Example: http://jsfiddle.net/hwb4w/
I have a few floating div elements that are floating left. They all have a height of 100%. One of the divs exceeds the height of the view port and the other DIVs do not resize to 100% of the parent DIV which has a position of relative set (which is how it should work in my oppinion).
Except the display table, table-row, table-cell solution, is there any other way of making all divs 100% of the viewport and if one needs to be higher, make the others stretch to 100% of the parent div that got stretched by the increased div.
How? :)
Thank you.
Correct me if I'm wrong but it seems that you want equal height floated columns. The explanation to this can be quite involved so I'll point you to a few examples.
Try
http://thelucid.com/2010/12/03/the-solution-to-fluid-inconsistencies-and-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I don't follow your question completely. Have a look at this code:
<html>
<body>
<div style="height:50px;position:relative">
<div style="background-color:red; float:right; height:100%">moo</div>
<div style="background-color:green; float:right; height:100%">boo<br/>coo<br/>doo<br/>goo<br/>boo<br/>coo<br/>doo<br/>goo</div>
<div style="background-color:blue; float:right; height:100%">foo</div>
</div>
</body>
</html>
As you can see, the center DIV is has height of more than 50px, so the the outer DIV (with the relative position") is stretched, along with the other inner-DIVs.
Doesn't this work for you?
Im making a website http://nebkat.com/beta/index.php and there is a grey background and a white background for content(see for yourself). The problem is that I cant set the white part to be 100% height. It only stays up to the title(Welcome...) and then it stops.
Heights specified in % will not be honored by the browser (edit: I mean to say they wont work the way you expect them to).
You need a clearing div inside your <div id="container"> div. Here is where you should place it:
<div id="container">
<div id="logo">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<!-- HERE -->
<div style="clear: both;"></div>
</div>
set the height of your #container div to be 100% this should fix the problem (at least it will in firefox 3.6).
You should really install a tool like Firebug for firefox, you can use it to 'live' modify css properties on websites. it makes it really easy to figure out issues like this.
give height as 100% for container div and that would solve your problem.
this answer should be updated with this one: Make div 100% height of browser window
body,html{
height:100%;
}
#container{
height:100%
}
Well you will use min-height:100%; or min-height:500px.
That can solve your solution.
The height: 100% in CSS doesnt't work as you'd expect.
My solution would be to write some simple JavaScript which measures the available height, and then sets the div's height appropriately.
It should be pretty straightforward, but if you need any help, I'll put it together for you.:)
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.