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.
Related
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/
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I have a header div, and inside this I have a caption div. I'm trying to centre align the caption div. Currently the caption div is aligned to the left. I might just be incredibly dim, but i've been looking at code all day, so my mind is fried.
html
<div class="wrapper">
<div id="header">
<div class="caption">First Caption - Health & Safety</div>
</div>
</div>
css
#header {
position:relative;
width:1200px;
height:400px;
margin:auto;
border:1px solid red;
}
.caption {
position:absolute;
width:1000px;
height:140px;
background-color: red;
margin: auto;
}
pls try to remove the
position:absolute;
try to add margin-left:value; to caption class.
for exemple margin-left:10%;
I have a parent DIV with 3 children DIVs. I need to float left one DIV, float right another DIV, and center the 3rd DIV.
The parent width is 100% so not fixed.
I tried the following but the DIV is not centered:
<html>
<head></head>
<body>
<div style="width:100%;border:1px solid #000000;height:200px;">
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:20px;float:left"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:auto;margin-right:auto;float:left;"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
right:20px;float:right;"></div>
</div>
</body>
</html>
I created a fiddle for you to test: http://jsfiddle.net/swS5x/
Thanks
Well, one of the solutions could be to simply add for the #parent add text-align:center; and on #center, remove the float:left; and add display:inline-block;
#parent {
width:100%;
border:1px solid #000000;
height:200px;
text-align:center;
}
#center {
width:50px;
height:50px;
border:1px solid #000000;
margin-top:75px;
margin-right:auto;
margin-left:auto;
display:inline-block;
}
The display:inline-block; makes the element behave much like an image would, which you can center inside a container.
http://jsfiddle.net/swS5x/2/
If you can, reorder your div elements and don't float the #center
See example
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
A floated element will ignore margin: auto for the left and right margins.
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.