I want to make the form looks 1200px in width. However, when I set width in class .container or .form-group, or even in form tag, it won't work. Only when I set width in textarea tag will it work. What is the problem?
index.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="status-box"></textarea>
</div>
</form>
</div>
</body>
</html>
style.css
.container {
width: 1200px;
margin-top: 20px;
}
Your container size is fine - but if you want your elements to fill the container, you'll need to set the width of them seperately.
E.g.
.container { width: 1200px; }
textarea, input { width: 100%; }
If you want the textarea fill the 1200px, just add this line in your CSS code :
textarea {width: 100%;}
See it here
Also provide some height in CSS Class
.container {
width: 1200px;
margin-top: 20px;
min-height:10px // or Height:whatever the height you prefers
}
Just to make sure that the CSS knows where it's being applied, you should try this in your style file:
.container .form-group {
width: 1200px;
margin-top: 20px;
}
Or if you're tying to size your text area you need to use it's rows and cols attributes: http://www.w3schools.com/tags/tag_textarea.asp
Please add "background-color: gray" to your container class. You will see the div width works. The width is for div, while it's not for the content in the div. So the right way is add width to textarea.
There isn't a problem. As you can see the width is already active tho it doesn't show since there is no identification. snippet here.
If you change your css to look like the following you can see it for yourself.
.container {
width: 1200px;
margin-top: 20px;
background-color:blue; <-- This will show the full width of your div in a color
}
Related
I have a html file with div for which I want to add an background using CSS so that I can change it using jQuery or JavaScript.
In HTML file:
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>
In style.css I have:
#mydiv {
background-image: url("images/bg.png");
width: 100px;
height: 100px;
}
it is showing a blank page what is an error in this simple code
Your code was fine, but you needed a defined width and height for your <div>. Also, I replaced your image so you could see that it does work.
http://jsfiddle.net/d4pyokh9/1/
Your div doesn't have any content, therefore it's not going to show anything. If you want a background on the entire page then change the css to:
body {
background-image: url("images/bg.png");
}
Otherwise change the css to:
#mydiv {
background-image: url("images/bg.png");
min-height: /* some size here */;
min-width: /* some other size here*/;
}
You also may want to look into background parameters in regards to repeat-x and repeat-y.
You should define width and height of div and also background-size for the image,like(background-size:100% 100%;)
mydiv has no height/width so the background image is too small to see.
Try:
#mydiv {
background-image: url("images/bg.png");
height: 1000px;
width: 1000px;
}
And then adjust to the size you want.
Everyone this is my first post, so I hope I did it right.
I am facing a problem where I have child divs that need to be the same width. The #content can be bigger than the browser window (hence the 3000px, but won't always be bigger than the browser window). Currently #content is shown properly and I can use the scrollbar to see the entire #content, but #messages and #menu are cut off at the width of the browser window.
I have tried using width: inherit and several other options, but they didn't work. Does anyone else have a working solution?
I have created a JSFiddle to make life easier http://jsfiddle.net/Ks665/
I have added a screenshot of the probleem:
The red and green must become as long as the blue div.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</body>
<html>
CSS:
#import url('reset.css');
body {
min-width: 990px;
}
#messages {
height: 100px;
background-color: red;
}
#menu {
height: 100px;
background-color: green;
}
#content {
background-color: blue;
height: 250px;
width: 3000px;
}
You could try wrapping them inside another DIV, and specify the width on there; the child DIVs will automatically fill to the width of the parent:
<div id="container">
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</div>
And then apply the width to the container DIV instead of to 'content':
#container {
width: 3000px;
}
The reason it isn't working in your example is because the DIVs are children of the body tag, which has a minimum width specified, but nothing explicitly defined like I've shown above.
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
The page is here:
https://gentle-day-3026.herokuapp.com/
The css file like this:
https://gentle-day-3026.herokuapp.com/stylesheets/base.css
another is to use reset.css to replace the base.css
(the new user just 2 hyperlink allowed)
Try to change some many times, include methods like:
<body>
<div id="divMain">
...
</div>
</body>
body
{
margin: 0;
padding: 0;
text-align: center;
}
#divMain
{
margin: 0 auto;
padding: 0;
width: 1024px;
text-align: left;
}
but it didn't work.
Thank you for your help!
I even test it in a very simple html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheets/base.css" media="Screen" type="text/css" />
</head>
<body>
<div id="divMain">
<h1> hello </h1>
</div>
</body>
</html>
It still did not work!
On your current page, body has a fixed width of 720px. Remove this. Next, set the fixed width on your outer-most div that sits just inside the body. Additionally, give this div a margin of 0 auto, which will result in it being centered horizontally.
What you have done is fine. But you given a width to the body. Remove the width attribute from there. Try this CSS and it works:
body {
color: #999999;
font: 14px/1.5em "Lucida Grande",Arial,sans-serif;
margin: 20px;
width: auto;
}
See base.css line no. 8 has the same width: 720px; for the body! And also, for the <div align="center"> change it to <div class="center"> and give css as .center {width: 720px; margin: auto;}. Please try this and let us know.
Finally you should be having this:
.center {width: 720px; margin: auto;}
<div class="center">
You need to set your body width to 100%, your <div> to whatever size you want (eg 720px) and its margin to 0 auto.
The sample code that you have posted works perfectly for aligning #divMain to the center (horizontally)...
Looking at the code you have posted for your site, it looks like you have defined a fixed width for your body element (see line 12 of base.css). Removing this fixed width, and then moving the correct width to the wrapper div (currently set using align="center") should solve your problem.
body{
width: 100%;
height: 100%;
}
.divMain{
width: 720px;
margin: 0 auto;
}
May be it helps you.
Try to add this style in your code.
You have 2 problems here:
You set the margin of <body> to be 0 (inline css above). What's more, <body>'s width is only 720px (base.css, line 8), which is smaller than the width of most desktop viewports. As a result, <body> snaps to the left of the viewport, with margin-left as 0 and plenty of space to the right. With <body> aligned to the left, its children (such as #divMain) cannot possibly look centered. What you can do is to either center <body> by using margin: 20px auto, or by setting <body>'s width to be 100% to fill the entire viewport.
The width of the child, #divMain, is larger than that of its body. You will have to set the width of #divMain to be smaller than 720px (e.g. 500px) - the only way for a child to be centered horizontally within its parent using margin:0 auto is for the parent's width to be larger. Of course, I don't think you intended to have #divMain smaller than 1024px in width, so I'd suggest setting <body>'s width to be 100%, which almost guarantees that its width will be larger than #divMain's.
In short, you can either have:
body{width:720px;margin:20px auto;} #divMain{width:500px;margin:0 auto;}
or
body{width:100%;} #divMain{width:1024px;margin:0 auto;}
Hope that helps.
HTML
<body>
<div class="div-body-width">
....
</div>
</body>
CSS
body {
margin: 0px;
padding: 0px;
}
/*Insert here your width*/
.div-body-width {
width: 1024px;
margin: 0 auto;
}
Wrap the content of your body in a div :
<body>
<div id="page">
...
</div>
</body>
Then in your css :
#page {
margin: auto;
}
html:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="qa.css" />
</head>
<body>
<div id="wrap"></div>
</body>
</html>
css:
body {
margin:0;
padding:0;
}
#wrap {
width:750px;
margin-right:auto;
margin-left:auto;
background:#008B00;
}
The html file is called qa.html, and the css file is called qa.css
The two files are in the same directory.
Um... How's the HTML supposed to show anything if there's no content?
[EDIT] To make it more specific and not sound like I'm complaining: put some content in the wrapper div, otherwise it's empty and thus with 0 height.
[EDIT 2]: According to the expected output you describe in the comment, you want the div to take up 100% height of the document. You need to specify this explicitly, ie body and #wrap need to have height:100%. Or even better, min-height.
The div will collapse upon itself if there is no content and no height set. Either put some text or content into the div, or set a min-height or height explicitly.
Edit: please put a doctype in your pages; it helps a lot with expected renderings.
a green div block that fills the middle 750 pixels of the page.
So,
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrap {
width: 750px;
height: 100%;
margin: 0 auto;
background: #008B00;
}
?