The following HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="border: 1px solid blue;">
<div style="float: left;">
Expected NPV</div>
</div>
</body>
</html>
...renders a parent DIV with a blue border and a child DIV inside. However, the float:left; directive makes the parent not surround the child with a border (which is what I desire).
Is there a way to make this happen w/out removing the float:left?
I boiled the HTML down to a very simple example to illustrate the basic problem. I realize float:left; is nonsensical in this example, but it is required from the original HTML. I can post that if it would be more helpful.
You can give the parent an overflow to take the child's height into account, like this:
<div style="border: 1px solid blue; overflow: auto;">
<div style="float: left;">
Expected NPV</div>
</div>
You can test it here. For a full explanation, check out the excellent write-up on quirksmode.org. Note that overflow: hidden also works here, you can test that version here.
Use overflow:auto; eg. on the container.
Similar problem : Floating image to the left changes container div's height
Related
I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
I have a div tag with hight set to 800px, I want that when the browser width is greater than 600px it shouldn't stretch the div but it should bring it to the middle of the page
How can I achieve this?
can I use the following code?
centered content
Short Answer:
with margin set to auto
<html>
<head><title>Your Title</title></head>
<body>
<div style="width:600px; margin:auto; border:1px solid red">
</div>
</body>
</html>
Long answer:
You might want to set an id for that div, and give appropriate css selector with the rules rather than using inline style like that.
Also, for that to work correctly in ie 6 and 7, you need to give the doctype declaration, otherwise it won't work because ie will work in quirks mode
http://www.satzansatz.de/cssd/quirksmode.html
So the complete answer should look like
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your Title</title>
<style>#container { width:600px; margin:auto; border:1px solid red }</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
put in the css the following properites :
max-width:600px;
position:relative;
margin:auto;
one thing I am not clear is do you want the div to take the width of the browser if the browser width is less than 600px?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<style type="text/css">
body { margin:0;padding:0;}
</style>
</head>
<body>
<div>
<div style="width:1000px;margin:0 auto;">
<div style="width:700px;display:inline-block;">1</div>
<div style="width:300px;display:inline-block;">2</div>
</div>
</div>
</body>
</html>
I want these blocks flush, but currently the second block is pushed down..
If I change the width of second block to 296px then it works..
I don't want to use float:left because it will require one more block with clear:both;.
This is what you have at the moment, but reduced in size:
I don't want to use float:left because
it requires one more block with
"clear:both;".
With float: left, you can clear/contain the floats without adding an element with clear: both. You can do this by adding overflow: hidden (or clearfix) on the parent element.
Without overflow: hidden
With overflow: hidden
If you want to stick with display: inline-block..
The first thing you need to do is remove the whitespace between the two divs.
With whitespace
Without whitespace
If you want to add a border, you can add wrapper elements and add the borders to that.
Or, you can use box-sizing: border-box as shown here.
If you want to use 2 elements in line (1000px total for 300+700px) - just set font-size:0 for container. This is very logical in this case and now you can use all benefits from inline-blocks, like align:justify!
You can only give display:inline-block to elements that are naturally inline (e.g. span, a)
Otherwise your element won't render correctly in older browsers (e.g. IE7-)
Include the width of the border in the width of the div.
If you want it to appear 300px wide on the screen, make it 298px (+1px for the left border, +1px for the right border = 300px). This is also true for padding.
Read up on the w3 box model versus the IE box model.
Here is what I'm trying to do.
I want layout with three columns. Lets call them left, middle and right column. I can't figure out what to do so when the content of main increase the height of left and right columns to increase also ?
I'd suggest checking out this link for a great example of a 3 column liquid layout. Just view the source for the example of the HTML and CSS. He also provides examples of various other layouts (see the tabs at the top of the page).
Here is an excellent website: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts that has a whole bunch of different layouts that are all CSS based.
HTML:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 Columns</title>
</head>
<body>
<div class="container">
<div class="left">
<h3>Left Column</h3>
</div>
<div class="center">
<h3>Center column</h3>
/div>
<div class="right">
<h3>Right column</h3>
</div>
</div> <!-- /container -->
</body>
</html>
CSS:
.container {width: 800px; border:1px solid red; overflow:auto; }
.left {width: 250px; border:1px dashed green; float:left}
.center {width: 250px; border:1px dashed green; float:left}
.right {width: 250px; border:1px dashed green; float:left}
See the demo here:
http://jsfiddle.net/z2SLL/1/
I would strongly recommend against using the <table> element simply because for semantic reasons, we are not talking about displaying tabulated data.
Instead, exploit the display properties using values like "table", "table-row" and "table-cell". Here is a demo: http://jsfiddle.net/teddyrised/DLaCW/20/. You can see that although the content of each column varies, their overall height follows that of the tallest <div>.
Maybe the faux columns technique is what you need. Check it out here, here and here.
If you need it to be liquid or with no images (for whatever reason) then you might have to use some javascript like this example or you can check this weird example.
Anyway, with the little information there's not too much to offer because there's a lot of variables and different solutions.
I have the following HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style>
.box {
border: solid black 1px;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
<input class="box" style="width:150px;" /><!--CRLF for clarity only-->
<input class="box" style="width:150px;" /><!--CRLF for clarity only-->
</form>
</body>
</html>
When rendered the 2nd row of textboxes appear to be cumulatively longer than the 1 on the first row. This despite explicit setting of widths via the style attribute
Why does this happen and can I avoid it?
Note: This appears to work the same in both FF3 and IE7
There is a border on a textbox that isn't included in the width.
jhunter is correct, and I would add that you need Firebug for FireFox (it's free). You could have figured this out yourself quickly with that installed. Inspect the element you are interested in and look at the "layout" tab.
Indeed, the width of your boxes are +2 as a border on both the left and the right (which are 1px) means there's 2 extra pixels per box. So in total you're +6.
I'd suggest reading CSS Mastery, it explains a lot of the differences with the different browser box models and how they affect layout and width's in different browsers.
CSS Mastery