I had created the following divs and its definition.
<div class="serach-container">
<div class="search-keys-container">
<div class="search-type"> </div>
<div class="basic-search-keys-container"> </div>
<div class="advance-search-keys-container"></div>
</div>
<div class="search-result-container"></div>
</div>
.search-type{
height:20px;
width:auto;
margin:5px 10px;
background-color:#4000A0;
}
jsfiddle
But unfortunately the top-margin of class search type goes upwards. I tried by adjusting the margins so and so. But no result is found. Without margins it is ok. But I want the margins.
edit:
I dont know why top-margin is not working. Anyway an alternative solution is put another div say error-correct before the search-type div ie
<div class="serach-container">
<div class="search-keys-container">
<div class="error-correct"></div>
<div class="search-type">/div>
<div class="basic-search-keys-container"></div>
<div class="advance-search-keys-container"></div>
</div>
<div class="search-result-container">
</div>
</div>
.search-type{
height:20px;
width:auto;
margin:0px 10px 5px 10px;
background-color:#4000A0;
}
.error-correct{
width:100%;
height:5px;
}
jsfiddle
Thanks all my friends for your great help.
DEMO
Try change that class like here:
.search-type{
height:50px;
width:90%;
margin:0px auto;
background-color:yellow;
}
Try this and let me know if this is what you wanted.
.search-type{
height:20px;
width:auto;
margin:5px 10px 0 10px;
background-color:#4000A0;
}
That makes it come down and still keeps your margins.
As I said in my comment, you are being a little bit too strict in your size definitions...
But to solve your problem, you should do this:
.search-result-container{
height:100%;
width:100%;
background-color: #0000FF;
padding-top: 5px;
}
.search-type{
height:20px;
width:auto;
margin: 0 10px 5px 10px;
background-color:#4000A0;
}
To me, this looks like a bug or something, as margin isn't being applied against the parent, but the body tag.
Also, you have a minor typo in the first container serach
Try adding padding:0.01px to .search-keys-container. It won't have any visual effect, but it will cause margins to not collapse like this.
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 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
Okay, so, on my website, I have three panels: cont1, cont2, and cont3. The following are their CSS definitions:
#cont1 { width:35%; position:fixed; background:#2583FE; right:0px; overflow:hidden; float:right; border:1px solid #0961D3; border-left:0px solid black; height:100%;}
#cont2 { height:69%; width:100%; overflow:auto;}
#cont3 { min-height:75px; width:100%; position:relative; display:block;}
Now, if I implement it in the following way, only a vertical scrollbar appears and I can scroll my content as I wish:
<div id="cont1">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
However, if I implement it in this way (the way that I ultimately want it to work), horizontal scrollbars appear in cont2 for no apparent reason:
<div id="cont1">
<div id="cont2">
<div id="cont3">First element</div>
<div id="cont3">Second element</div>
<div id="cont3">Third Element</div>
<!--And so on-->
</div>
</div>
Usually, I would just put overflow-x:hidden, but I'm trying to make my site as cross platform as possible and I know overflow-x is a CSS3 property (not supported in IE8 or below). Could anyone offer insight as to what might be happening? Thank you!
.cont{
height: 30px;/**/
border-color: black;
/*position: relative;*/
position: fixed;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border: none;
}
To begin, you must use the #id once, there can be only one #id. Uses .classes if you want to put several.
Then I do not understand I do not have this problem on jsFiddle, I wonder if this is the edge that is used in #cont1 that you created this bar.
You have a page to show us the problem live?
http://oi49.tinypic.com/2qithg4.jpg (example is a jpg img)
As You can see in the example; the boxes (after floating) gets a white space under it in order to make a room for an equal row of divs
but I wanna float all of 'em to fill the gaps.. any suggestions?
That's what I wanna do (example is a jpg img)
http://oi47.tinypic.com/2nixr2x.jpg
Thanks in advance.
edit// Showing Alex some code :)
HTML
<div id="content">
<div id="featured"></div>
<div class="box"></div>
<div class="box"></div>
<div style="width:310px; height:18px; margin:0 0 10px; padding:98px 0; text-align:center; float:left; display: block; background: #ffffcc;">Ad Space</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
#content { }
#featured { width:630px; float:right; height:214px; margin:0 10px 10px 0; }
.box { float:left; width:310px; margin:0 10px 10px 0; height:400px; }
A similar question had been asked before: Vertical alignment of float:left div's, though no proper solutions were presented. As far as I guess doing it with pure CSS for a dynamic content would be difficult, so I would suggest to use jQuery Masonry for this task.
For a pure CSS approach, I guess it can be done using CSS3 columns as explained here.
i want to create this effect using css, can you see the big box with the title and the blog post, and little box with the date on it and the number of comments on it. its been puzzling me, an example would be great thanks guys :))
In the HTML just create two separate divs, one for the details and the other for the content.
<div class="post">
<div class="post_details">
<div class="post_date">
<div class="post_day">26</div>
<div class="post_month">NOV/10</div>
</div>
<div class="post_comments">2</div>
</div>
<div class="post_text">
<div class="post_title">PASSION SUCCESS AND MONEY</div>
<div class="post_title">A lot of people...</div>
</div>
</div>
With the CSS you could float them both left or absolute position the details box off to the side.
.post { clear:both; width:600px; }
.post_details { float:left; width:53px; height:93px; background:#fff; }
.post_date { width:48px; background:#ddd; }
.post_month { width:48px; background:#666; }
.post_text { float:left; width:545px; background:#fff; }
its pretty easy with some css3:
http://jsfiddle.net/meo/J9SjQ/
don't quite understand what's so puzzleling but if it's how the divs are arranged there's 100 ways it could be done one way would be something like
http://img715.imageshack.us/img715/1650/exampleai.png
if it's about how to get rounded corners it would be like jakub mentioned
here is a sample
http://www.jsfiddle.net/KKpPQ/3/
The main trick would be in using the CSS3 border-radius property. That makes the boxes round. You'll have to use vendor prefixes to get this working in current browsers:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;