I can't put this to work like it should, I'm not that good with CSS, I need you help!
I have a page like this:
<html>
<head><title>title</title></head>
<body>
<div id="page">
<div id="container">
<div id="head"><img src="..." alt="..." /></div>
<div id="content">
<div id="menu"><ul><li>...</li></ul></div>
<div id="content_body">stuff here</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
OK. My container div have a background color, I want that, as long as my text inside the content_body div expand, the background of the container div would expand too, but it is keeping a fixied height (it's just expanding the logo image height), and my text in the menu and content_body div is out of the background.
My CSS:
body
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
background-color: #333333;
background-image: url(Images/bg.png);
background-repeat: repeat-x;
color: #000000;
margin: 0px;
}
input
{
font-family: Tahoma, Verdana, Arial, Times New Roman;
font-weight: bold;
}
h2
{
text-decoration: underline;
font-style: italic;
}
#page
{
width: 100%;
}
#container
{
overflow: visible;
width: 780px;
border: solid 6px #FFFFFF;
background-color: #DCDCCD;
margin: 0 auto;
margin-top: 15px;
}
#content
{
clear: both;
}
#menu
{
width: 240px;
display: block;
float: left;
}
#content_body
{
width: 500px;
display: block;
float: right;
}
What I'm doing wrong?
Everything in your #content div is floated, and well, floated elements don't really take up any space. Essentially since they are floated they are being taken outside of the regular stream of content and breaking the rules to be able to be pushed to the left or the right.
In order to get the div containing the floated elements to size with its content you could give is display: inline-block and maybe width: 100% so that it takes up the whole area...
#content{ display: inline-block, width: 100%; }
Giving it a display of inline-block makes everything outside of it think it is an inline-level element, but everything inside it is treated like it is a block-level element, and it ends up giving height to anything inside it that might be floated without having to give it a set height.
Try
#content
{
...
overflow: auto;
}
Edit:
Also make sure to add a width as DA points out in the comment below.
Try:
#footer{
clear:both;
}
demo
Related
I'm struggling with a problem which seems simple:
My code:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
width: 100%;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The box contained in the wrapper has a fixed size, which might overflow the wrapper on small screens. Why doesn't the wrapper wrap around the box? How would I do that?
You can also check out the issue in this jsFiddle.
In order to make this work:
Remove width: 100% and add to the wrapper display: inline-block.
Doing so, will enable the wrapper to have as much width as needed to wrap around the box. Putting width: 100% restricts your wrapper to the width of the screen and in case of the box having a bigger with than that of the screen, it won't work.
If you do not want to have a horizontal scrollbar, especially on narrower screens use: box-sizing: border-box on the wrapper.
CSS:
.wrapper {
display: inline-block; /* Ensures that the box stays wrapped */
padding: 10px;
background: white;
box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}
Here is a working version of your jsFiddle, with both the wrapping issue mended and the horizontal scrollbar abolished.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
box-sizing: border-box display: inline-block;
padding: 10px;
background: white;
}
.box {
position: relative;
margin-top: 40px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
For reference:
display: inline-block;
box-sizing: border-box;
Use display:inline-block on the wrapper to resize the container based on the content inside.
The div element by default has display:block; so you need to change its display.
You should remove width:100%; from .wrapper class, then you can make it display:inline-block; or display:table;
*{
font-family:tahoma;
}
body{
background:#333;
}
.wrapper
{
padding:10px;
background:white;
display:inline-block;
}
.box
{
margin-top:40px;
width:1100px;
height:400px;
background:#aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
Your problem occurs, because HTML documents, by default, display all elements as display: block.
There are two ways to do it as our friends have mentioned before.
First one is to use inline-block value for the display property:
body{
display: inline-block;
}
The second way is to use max-width:
div.wrapper{
max-width: 100%;
/*we have set height property to auto to have coefficient between width & height*/
height: auto;
}
For more information visit these webpages:
inline-block
max-width
You can solve the problem by using the following css:
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
display: inline-block;
}
.box {
margin-top: 40px;
width: 1100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
The only change is I have added display: inline-block to .wrapper element.
Why wrapper doesn't wrap around the child div
The problem is all html element has some default CSS styling which gets applied by the browser.
In this case div gets a default property of display: block; It is the same property that makes a default unstyled div to take up full available width of it's parent element.
As you can see with this: snapshot of chrome dev tools
*The css style highlighted in red rectangle is the default styling applied by the browser.
*The red underlined text tells us about the width of the element. The fading out signifies that value of that property is computed by the browser.
** While we are at it I want to point you to a different problem that you might have faced with the previous code and if the goal was to make the wrapper to wrap box at all times.
If the .box div would have width far less than that of the width of the browser then another problem may arise which I have shown in the code snippet bellow.
* {
font-family: tahoma;
}
body {
background: #333;
}
.wrapper {
padding: 10px;
background: white;
}
.box {
margin-top: 40px;
width: 100px;
height: 400px;
background: #aaa;
}
<div class="wrapper">
<div class="box">
box
</div>
</div>
As you can see the box tries to cling to a side of wrapper.
You can read more about display css property here: CSS display property || CSS-Tricks
i have two div like this :-
<div class="pdetails">
<div class="contact_details">
text
</div>
<div class="clear"></div>
<div id="contact_area_form_" class="tform_wrapper">
text
</div>
</div>
the parent div is pdetails and it have two div (contact_details,tform_wrapper),my problem is the div contact_details show in top and the div tform_wrapper show in bottom.
how can i set this two div in the same line.
css code :-
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 510px;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float: right;
}
Remove div which have "clear" class or hide this with display:none.
<div class="pdetails">
<div class="contact_details"> text </div>
<div id="contact_area_form_" class="tform_wrapper"> text </div>
</div>
or use width in % value.
.tform_wrapper {
float: left !important;
padding-top: 10px;
width: 80%;
}
For me they show up in one line. Only when the window size is not big enough for both of them to fit, they will be shown in a vertical alignment. You could give the parent-div a fixed width to avoid that problem. Then in case of a small window size a scrollbar would show up.
I would go something like this: http://jsfiddle.net/Ewyzt/
the clear in between is the one saying there cant be more on this line and pushed the other box down what you want to do is clear after the last box so you can build after the two first boxes otherwise things will start to float u besides them.
.tform_wrapper {
padding-top: 10px;
width: 510px;
background: red;
}
.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;
}
.contact_details {
float:left;
}
I would like to suggest to use display: inline-block; property instead of float
Demo for display: inline-block
Please look at this fiddle.
I have different behavior for following two classes.
.class2 {
width: 49.5%;
display: inline-block;
}
.class3 {
width: 50%; /* Wraps to next line */
display: inline-block;
}
What I wanted to do is to divide the width equally b/w two divs and then start filling each div * with its own content.
But with width 50%, if I put some text in the div, the second div wraps to next line
With width 49.x%, it does not wrap.
Why is it wrapping? I am working inside a particualr div.
How can I make it not wrap and keep width = 50%.
Other than 50%, I dont know how to come-up with the correct value.
Try floating your divs like this:
.class1 {
background-color: red;
width: 100%;
}
.class2 {
width: 50%;
display: inline-block;
background-color: blue;
color: white;
float:left;
}
.class3 {
width: 50%;
display: inline-block;
background-color: blue;
color: white;
float:right;
}
You do not need to resort to float. That is a relatively ugly workaround that introduces its own problem (having to clear floats and/or set overflow:hidden on the containing element).
You do not provide your HTML markup but I would guess you have whitespace between the elements, as in Mr Alien's answer.
See Two inline-block, width 50% elements wrap to second line for a better solution.
Use float: left; to float you 1st <div> on the left and you can also float your 2nd <div> on the right using float: right; than use <div style="clear: both;"></div> to clear your floating elements:
CSS:
.class1 {
background-color: red;
width: 100%;
}
.class2 {
width: 50%;
background-color: blue;
color: white;
float: left;
}
.class3 {
background-color: green;
width: 50%;
float: right;
}
HTML:
<div class="class1">
<div class="class2">
This is demo
</div>
<div class="class3">
This is demo
</div>
<div style="clear: both;">
</div>
My fiddle
The reason that they stack instead of sit next to one another is that display: inline-block recognizes white space. If you have a return after your first div, then it will pick that up and cause it to stack. A work around would be something similar to...
<div class="col1">
Column one content.
</div><div class="col2">
Column two content.
</div>
Don't use floats, they cause all sorts of headaches. Just add this to your CSS:
body,html{ white-space:nowrap; }
a,pre,p,span,strong,h1,h2,h3,h4,h5,h6{ white-space:normal; }
...then make sure all text on your site is contained either within 'p' or 'span'
I often use display:inline-block; .
However, display:inline-block has some problem.
I recommend Grids - Pure pattern and wrote a sample code like Pure.
.class1 {
letter-spacing: -0.31em;
*letter-spacing: normal;
*word-spacing: -0.43em;
text-rendering: optimizespeed;
font-family: Georgia, Times, "Times New Roman", serif;
}
.class2, .class3 {
display: inline-block;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
font-family: "Hiragino Kaku Gothic ProN",Meiryo,Verdana,sans-serif;
width: 50%;
}
my fiddle
Put a:
margin:-2px;
into your class3.
This doesn't break your div but solve your problem.
Don't know why
<div id="content">
<div id="outer">
<div id="header">Transport</div>
<div id="image">
<img src="../images/img1.jpg" style="width:300px;height:300px"/>
</div>
<div id="right_content">large amount of text</div>
</div>
</div>
For the above the css used is:
#content {
width: 100%;
min-height: 600px;
overflow: hidden;
border: 1px solid;
padding: 0;
margin: 0;
}
#outer {
border: 1px solid;
float: left;
overflow: hidden;
width: 100%;
min-height: 200px;
}
#header {
border: 1px solid;
width: 100%;
height: 20px;
background-color: #006A4D;
color: #ffffff;
padding: 10px;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 18px;
clear: both;
overflow: auto;
}
#right_content {
border: 1px solid;
overflow: hidden;
min-height: 300px;
padding: 10px;
float: left;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
#image {
border: 1px solid;
min-width: 300px;
min-height: 300px;
padding: 10px;
float: left;
overflow: hidden;
}
Both the inner divs are float:left. But the output comes as one div below the other. How can I get them to appear side by side?
Works fine for me at http://jsfiddle.net/gaby/zv4zG/
The thing to keep in mind is that if you do not specify widths for the floated elements, and they grow in size in order to accommodate their contents, they may reach a size (when added) that exceeds their container width. At that point they will break and one will go below the other.
So, you have to ensure that their added widths (and horizontal paddings and margins) will never exceed their containers width.
the outer div has a 100% width, witch tells the browser to ocupy all the available width, that's why the second div drops beneath.
The solution is simple, make sure both divs have enough width to be able to be side by side.
You don't need to float the #right_content, just add a left margin wide enough to accommodate the image and drop the overflow:
#right_content{
border: 1px solid;
min-height: 300px;
padding: 10px;
margin-left: 322px;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
Live example: http://jsfiddle.net/ambiguous/8m3LS/
I gave #image and #outer a width and #right_content a negative margin to account for the #image's space.
jsFiddle: http://jsfiddle.net/stealthyninja/Hn2Et/
DIVs are block-level elements, meaning that they will stack vertically by default. In order to make them appear side-by-side, you will also need to set display: inline; in your CSS.
UPDATE
I just created this jsfiddle and it looks like your layout is fine... not sure what the issue is. Could it be browser specific?
As we give width to one of the div, it leaves the extra space for next div, but make sure the width of both divs do not exceeds the browser's width, otherwise the second div will move below the first div. this css worked for me:
#left{
display:inline;
width:50%;
float:left;
}
#right{
float:left;
}
<div id="left">
left div
</div>
<div id="right">
right div
</div>
I have the following problem.
I have done the following:
In my css file, I have declared both for body and for a div tag enclosed in body, height: 100%; (the div tag is technically a <asp:panel> tag, but get's rendered as a div tag.
This works fine, and the div container scale to fill the browser from top to bottom, and does not give any scrollbar, just as it is intended to.
However, on one of the sub-pages, from the Page_Load method I add some controls to the panel/div, and those controls are enough to fill more than the height of the screen, and therefore a vertical scrollbar is given as it should. However, when I start scrolling, the part of the content that was originally below the height of the screen do not get any background. So the background is still constrained to the max height of the screen even if it's contents are exceeding that height.
I assume that the height:100% causes the problem here, but I have not found a replacement that works as it should in this case. I tried height:auto; causing the background to be removed in it's entirety.
The question might be basic, but I do not do much web programming these days, so please bear with me :)
EDIT
As additional information, I should mention that the content is actually added inside a div inside the original div if that matters.
EDIT 2
Some of the relevant html and css:
<html>
<title></title>
<body>
<form>
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
</div>
</form>
</body>
</html>
And here is the extracted css parts:
*
{
margin: 0;
padding: 0;
}
html, body
{
background-color: #6CC66C;
height: 100%;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
height: 100%;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
p
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
a
{
font-family: Arial, Sans-Serif;
font-size: 16px;
text-decoration: none;
}
.MainContainer
{
background: #6CC66C url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
height: 100%;
margin: auto;
background-color: #F7F7F7;
}
div.MainMenu
{
position:relative;
float: right;
margin-right: 38px;
margin-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
I have a solution for this and it's rather simple. :)
.MainContainer {
...
display: table;
}
(Remove the height: 100% from elsewhere too, it's redundant.)
Some spec info on that: http://www.w3.org/TR/CSS2/tables.html also here: w3schools.com/css/pr_class_display.asp (Apparently I can only post two links a new user right now)
Regarding the use of Height: 100%, doing that will only make the elements height equal to the height of it's parent element - in this case the document window, not the contents of it.
Some spec info here: http://www.w3.org/TR/CSS21/syndata.html#percentage-units
Regards.
Try overflow tag in Css file
overflow:scroll;
overflow:auto;
I think what you need is something like this:
Style should be
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
a
{
text-decoration: none;
}
.MainContainer
{
background: #F7F7F7 url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
margin: 0 auto;
min-height: 100%;
}
div.MainMenu
{
float: right;
margin-right: 38px;
padding-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
And you need an element to clear the floated divs in the MainContainer
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
<div style="clear:both"></div>
</div>