I have a main div that has a background-color. I put a login window in that div with a width:675px; height:300px; Also have margins for the top/bottom of the window. The background isn't growing to accommodate the div. here's the code i'm using:
<div class="main">
<div class="topLine"></div>
<div class="loginWindow">
<div class="logo">
TEXT
</div>
</div>
<div style="clear: both"></div>
</div>
CSS:
.main {
background: linear-gradient(to bottom right, #152d47, #467ba7);
width:100%;
height:100px;
padding-top:8px;
overflow:hidden;
}
.loginWindow {
margin:0 auto;
width:675px;
margin-top:172px;
margin-bottom:115px;
height:300px;
}
Here's the jsfiddle: https://jsfiddle.net/grem28/uj5zbhf7/
Remove height of parent if you want that it can to grow or change it to min-height
well, use overflow:visible; instead of overflow:hidden;
Change your height to 100% and remove the overflow, or change it to visible. Here's the CSS with overflow commented out.
.main {
background: linear-gradient(to bottom right, #152d47, #467ba7);
width:100%;
height:100%;
padding-top:8px;
/* overflow: visible; */
}
Here's the updated jsfiddle: https://jsfiddle.net/uj5zbhf7/4/
Related
Here's what I've tried,the problem is that it only center my div when I set a fixed width in px.
How can I make the width to fit to the inner text?
HTML:
<div id="enclose">
<div id="problem">
MY TEXT HERE
</div>
</div>
CSS:
#problem {
margin-right:auto;
margin-left:auto;
width:200px;
}
#enclose {
position:fixed;
bottom:0px;
width:100%;
}
JSFiddle:
http://jsfiddle.net/7bqsdt6o/2/
You can use text-align: center on your parent div i.e. <div id="enclose">, this would center your <div id="problem">.
#enclose {
position:fixed;
bottom:0px;
width:100%;
text-align: center;
}
<div id="enclose">
<div id="problem">
MY TEXT HERE
</div>
</div>
You can use text-align: center on parent element (#enclose) or the CSS3 feature width: intrinsic;.
Working code (at least on Chrome 38) - CodePen
I have a fixed with container, lets say 1120px. Inside this container, i have a left sidebar which is 400px, and i need a right sidebar which is expanding from the container and touching the right side of the screen. Here is an image explaining the layout i want:
This is the progress i made so far: http://jsfiddle.net/UvxK8/
#wrapper {
background:#f0f0f0;
margin:0 auto;
width:400px;
overflow:hidden;
}
#wrapper .left {
width:100px;
float:left;
height:600px;
background:#333;
}
#wrapper .right {
position:absolute;
margin-left:100px;
height: 650px;
background: green;
min-width:100%;
}
Obviously its not good, because the right sidebar is too wide and a horizontal scrollbar appears.
The image you've used doesn't match your desicription of what you want; I think maybe you're looking at this the wrong way. If the right sidebar spills beyond the container, what's the point of the fixed width container at all?
From your image, it looks like what you want is...
HTML
<div id="header"><h1>Content here.</h1></div>
<div id="container">
<div id="container-left">
<p>Content here.</p>
</div>
<div id="container-right">
<p>Content here.</p>
</div>
</div>
CSS
#header {width:1120px;}
#container {width:100%; min-width:100%;}
#container-left {width:400px; float:left; }
#container-right {width:100%; min-width:100%;}
This will create the image illustration you've used. jFiddle here: http://jsfiddle.net/4JNX2/
Add position relative to your wrapper. try this
HTML
<div id="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>
CSS
#wrapper
{width:1120px;
background:#096;
margin:0 auto;
position:relative;
}
#wrapper #left {
width:10%;
float:left;
height:600px;
background:#333;
}
#wrapper #right {
position:absolute;
margin-left:10%;
height: 650px;
background: green;
min-width:95%;
}
I want to have a solid grey bar in a DIV called "bottomGrey" at the bottom of a container DIV called "contactCopy".
<div id="contactCopy">
<div id="contactLeft">
CONTACT
</div>
<div id="contactRight">
<iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x87e2349d140afa9f%3A0x9b41dc0528aa1d72!2s131+W+2nd+St+%23400%2C+Davenport%2C+IA+52801!5e0!3m2!1sen!2sus!4v1389913120076" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div id="bottomGrey"></div>
<div class="clr"></div>
</div>
the CSS
#contactLeft{
float:left;
width:30%;
padding:5%;
}
#contactRight{
float:left;
width:640px;
height:480px;
padding-top:5%;
padding-bottom:5%;
margin-left:5%;
position:relative;
}
#contactCopy{
position:relative;
}
#bottomGrey{
position:absolute;
bottom:0;
height:10%;
width:100%;
}
but it doesn't display at all, even if I remove the "contactLeft" and "contactRight" DIVS.
This should be simple but :(
Live site: http://estes.nbson.com/contact.html
It is displaying: its just got a white background and no content. Add a background color to it and you'll see what I mean.
Just add this to your CSS:
#contactCopy:after {
display: block;
height: 10px;
width:100%;
background-color: grey;
content: "";
clear: both;
}
With that you can remove <div id="bottomGrey"></div> and <div class="clr"></div> from your HTML structure, and get the grey border and clearing at the same time.
Give it a background color, 100% width and some content. Also Assuming the clr class is a clear fix implementation. Put it be for the bottom grey div. So contact copy will have a proper height, and bottom grey will sit bellow both floated divs. No need for the absolute position.
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>
I want use three div to create a round effect,like
<div class="wrapper">
<div class="left-corner"></div>
<div class="center-repeat"></div>
<div class="right-corner"></div>
</div>
the .left-corner and .right-corner have a only corner background image
css:
.wrapper
{
width:100%
height:110px;
}
.left-corner
{
background:...
width:110px;
height:110px;
float:left
}
.right-corner
{
background:...
width:110px;
height:110px;
float:right
}
but how should I render the middle div
I tried use width:100% but the corner div will be push and become another row
how can I set the three div in a line and look normal?
If your wrapper is set in percentages, then I would think it best to keep it's children in percentages as well, perhaps use a 33%, 33% and 34% to get the 100%. For the middle, or center-repeat I think you may need to use float: left as well, so it snugs up to the left-corner.
Have you tried using border-radius property?
You can just use the center div and border radius any other corner.
https://developer.mozilla.org/en/CSS/border-radius
Support for "border-radius" in IE
<div class="wrapper">
... content inside wrapper ...
</div>
.wrapper
{
width: 100%;
height: 110px;
border-radius: 5px;
}
Hi i thing you should this
Css
.wrapper
{
width:100%
height:110px;
overflow:hidden;
border:solid 5px black;
border-radius:25px;
}
.left-corner
{
background:red;
width:110px;
height:110px;
float:left
}
.right-corner
{
background:green;
width:110px;
height:110px;
float:right
}
.center-corner{
width:100%;
background:yellow;
height:110px;
}
HTML
<div class="wrapper">
<div class="left-corner">Left</div>
<div class="right-corner">Right</div>
<div class="center-corner">Center</div>
</div>
Live demo http://jsfiddle.net/pTxrW/
Here's my try: jsfiddle.
Left and right corners are 10px less height than center block so it's easier to see borders between them.