I have the following CSS setup for use on two different pages;
#content{
width:960px;
margin-top:0px;
height:auto;
font-family:arial;
font-size:1.em;
background-color:#f2f2f2;
}
#left-div {
width:600px;
padding-top:20px;
text-align:center;
line-height:.5em;
display:inline-block;
float:left;
}
#right-div {
width:300px;
margin-top:40px;
margin-right:20px;
display:inline-block;
text-align:center;
float:right;
background-color:#e0e0e0;
}
#isa-left {
width:440px;
margin-top:40px;
margin-left:30px;
margin-right:10px;
display:inline-block;
text-align:justify;
float:left;
}
#isa-right {
width:440px;
margin-top:40px;
margin-left:10px;
margin-right:30px;
display:inline-block;
text-align:center;
float:right;
}
On the page where I use left-div and right div like this;
<div id="content">
<div id="left-div"> Content </div>
<div id="right-div"> Content </div>
</div>
here is what happens. In FF, IE, Safari, and Chrome it looks just I expect with the two divs next to each other with a background color of #f2f2f2 from the content div.
On the second page where I use the isa-left and isa-right with the same setup as above what happens is that the inner divs are still showing where I expect them but now the background color from the content div is not showing.
After finding a post on here with the same problem I added this line overflow:auto; to the content div.
Now both pages in FF the content appears outside of the content div, 960 pixels to the right, with the background color showing. In IE, Safari, and Chrome both pages appear perfectly.
My question is what is causing the two inner divs to escape the content div in FF once I added overflow:auto;? Or is there a way to fix it so that the background color shows through on the second page without using overflow:auto;?
Any suggestion is appreciated.
Try this. I think it might be the solution to your problem.
http://jsfiddle.net/6dBdx/
-Code Reference -
CSS:
.wrapper {
width:400px;
margin-top:0px;
height:auto;
font-family:arial;
font-size:1.em;
background-color:#f2f2f2;
margin-bottom:15px;
}
.wrapper > div.box {
padding-top:20px;
text-align:center;
line-height:.5em;
border:thin solid #999;
/* Adding this for example purposes */
height:150px;
width:150px;
}
.pull-right {
float:right;
}
.pull-left {
float:left;
}
.clear-fix {
clear:both;
}
HTML
<label>Float Left Only</label>
<div class="wrapper">
<div class="pull-left box">One</div>
<div class="pull-left box">Two</div>
<div class="clear-fix"></div>
</div>
<label>Float Left & Right</label>
<div class="wrapper">
<div class="pull-left box">One</div>
<div class="pull-right box">Two</div>
<div class="clear-fix"></div>
</div>
Quick notes, don't forget to add a clear div after a float, so that elements show up correctly after floating an element. Also, if you want an element to line up next to each other, try using float:left as a rule of thumb, unless you want the elements to line up on the right in which case... float:right
Related
I'm trying to achieve some indent for content inside div. I want to have all elements inside to have 100% width, but first ones have to be positioned further from the left side. This demonstration shows what I exactly need:
I tried to mess around with ::before pseudoelement for parent div, different positioning and floating but no luck. Is there a way to achieve this in CSS or maybe jQuery?
Use the :nth-child pseudo class to select the items you want and then just give them a margin.
div{
border:1px solid #000;
padding:5px 10px;
}
p{
background:#000;
font-family:arial;
color:#fff;
margin:5px 0;
padding:5px;
}
p:nth-child(-n+2){
margin:5px 0 5px 50px;
}
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
</div>
By the way, floating items and giving them a 100% width is somewhat redundant so I have omitted that from my code.
You don't need to add width:100% to your elements. If they are block elements it will take automatically 100% of the container width. Then just use marginto whatever element you need:
HTML:
<div class="container">
<div class="content margin"></div>
<div class="content margin"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
body {margin:0; padding:0;}
.container {
width:400px;
padding:20px;
background-color:#ddd;
}
.content {
height:60px;
background-color:green;
margin-bottom:10px;
position:relative;
}
.margin {
margin-left:150px;
}
FIDDLE
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
when I make the div's(that contains the drop down menu)positioning to relative and the drop down menu div's positioning to absolute,it shows me only the last item on the drop down menu.if I set drop down menu container div to relative and leave the drop down menu div positioning,then it works.But that affects the rest of the page.So,how to set the positioning that would make the drop down works without affecting any other parts of the page.
HTML
<div id="top_head">
My Online Shop
<div id="nav">
<div class="test">Home</div>
<div class="test" id="product">Products
<div class="test1">shirt</div>
<div class="test1">Pant</div>
<div class="test1">inner</div>
<div class="test1">cap</div>
</div>
<div class="test">About</div>
<div class="test">contact Us</div>
</div>
</div>
CSS
body{
color:green;
}
#top_head{
width:100%;
height:100px;
font:48px Arial green;
border:1px dotted red;
}
#nav{
background-color:gray;
width:57%;
border-radius:5px;
font:28px Arial orange;
margin:0px -49px 5px 15px;
}
#nav a{
color:red;
text-decoration:none;
margin:0px 50px;
}
.test{
float:left;
}
.test:hover{
background-color:orange;
}
#product{
position:relative;
}
.test1{
position:absolute;
border:1px solid red;
visibility:hidden;
}
#product:hover .test1{
visibility:visible;
background-color:yellow;
}
I've tried with display property too. Same results.
If you have any idea where the problem lies, please help.
It looks like the issue here is that you're using position:absolute on all of the sub menu divs. This is essentially making them lay on top of each other (leaving the last one on top).
One solution for this is to wrap all of these elements in a container div and make that the thing that is hidden or shown:
Working Fiddle Demo
Your sub-menu becomes:
<div class="test1">
<div>shirt</div>
<div>Pant</div>
<div>inner</div>
<div>cap</div>
</div>
And the CSS is altered slightly:
.test1{
display:none;
}
.test1 div{
border:1px solid red;
}
#product:hover .test1{
position:absolute;
display: block;
background-color:yellow;
}
Here you have the code and demo version of the problem.
if you see the last two black boxes are in center is there a way to make them show on left side ?
mainparent
{
width:500px;
height:200px;
text-align:center;
background:#ccc;
}
.boxes
{
width:50px;
height:50px;
display:inline-block;
margin-left:5px;
background:#000;
}
DEMO
Why not just float them left ? (and resize your container to fit them..)
This way you have better control of the margins, since the font-size does not affect them (nor the whitespace)
#mainparent
{
width:480px;
height:200px;
background:#ccc;
}
.boxes
{
width:50px;
height:50px;
float:left;
margin:5px;
background:#000;
}
Demo at http://jsfiddle.net/JxhP8/32/
Update
If you want the elements left aligned amongst themselves but center aligned in their container, you will need another element in the middle and some javascript..
Here is a jquery implementation
html
<div id="mainparent">
<div class="centerized">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
..
..
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
</div>
css
#mainparent
{
background:#ccc;
}
.centerized{
overflow:hidden; // to grow according to the boxes
margin:0 auto; // to be centered in container
}
jquery
$(function(){
// cache the repeatedly used elements
// and fixed values
var main = $('#mainparent'),
centerized = main.find('.centerized'),
itemWidth = main.find('.boxes').outerWidth(true);
$(window).resize(function(){
var fitItems = (main.width() / itemWidth) | 0;
centerized.width(fitItems * itemWidth);
}).trigger('resize');
});
Demo at http://jsfiddle.net/JxhP8/34/
Change your CSS #mainparent text-align to left.
Since you already have answers, an alternative is to use CSS Selectors
#mainparent
{
width:500px;
height:200px;
text-align:center;
background:#ccc;
}
.boxes
{
width:50px;
height:50px;
display:inline-block;
margin-left:5px;
background:#000;
}
.boxes:nth-child(17)
{float:left; margin-left:21px;}
.boxes:nth-child(18)
{float:left; margin-left:9px;}
JSFIDDLE
You still have work to do to get the layout correct, it only works when you have a fixed number of boxes etc, but you may find this approach useful (or horrible to know not to use it again!)
I'm trying to create a simple markup with header+content+footer+sidebar. The sidebar must float above the header and content element, and if it's taller than the content, it must push the footer down (like this: http://jsfiddle.net/gWLFN/7/).
The HTML:
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="header">header</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
The CSS:
#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar {
float:right;
margin-top:50px;
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
The problem is that in IE7, the sidebar pushes down the other elements. I think it's because the total widths of header+sidebar is greater than wrapper width. I have found a lot of posts about float:right problem in IE7, but all of them are for widths that doesn't exceede the wrapper.
I have choosen float:right instead of absolute positioning because the position of the footer must depend on sidebar height (if someone knows how to do this with absolute positioning, perfect!).
I would appreciate any idea to solve this.
You are almost there, the order of the HTML structure is slightly muddled and you are forcing CSS widths rather than letting the browser work out the best fit.
You can remove the width values from the nested CSS classes (except #sidebar) as, by default, they take up any remaining width unless they have one specified. Then you just need to swap #header and #sidebar round in the HTML structure and you are pretty much sorted.
Please note, since we have swapped round #header and #sidebar, the margin-top within #sidebar has been changed.
CSS
#wrapper {
width:500px;
}
#header {
height:100px;
background-color:red;
}
#content {
height:300px;
background-color:green;
}
#footer {
height:100px;
background-color:blue;
}
#sidebar {
float:right;
margin-top: -50px; /*changed this to -50px */
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
HTML
<div id="wrapper">
<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
Working example: http://jsfiddle.net/gnx2z/