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.
Related
I have a vertical div with five little divs inside. Now, I want the first two and the last two to have specific heights, and the one in the middle to be changeable, depending on the amount of content inside of it. Also, there should probably be a minimum height to the entire div, so it can fit the page nicely, and the bottom two divs are supposed to be fixed to the bottom of the page. I am only allowed to use CSS. Since I don't have any code for this, let's say those four fixed divs have the height of 100px, and they are named #one, #two, etc.
Thanks in advance.
Can you just use:
.two {
min-height: 100px;
height: auto;
}
https://jsfiddle.net/5cLd2ybv/
You can do the following, all you have to do is set the elements
display:block;
here's an example:
#container{
border:1px solid black;
}
.element{
display: block;
height:100px;
width:100px;
margin:0px;
border:1px solid;
}
<div id="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
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 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.
I have 3 divs vertically. The first should have 100% width, the second should have an image with width 283px, and third div should have 100% width.
Does anyone know how to position the image div in the middle of two others divs 100%?
I've tried this, but dont works for me
<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
.first{
width:100%;
float:left;
background:yellow;
}
.third{
width:100%
float:right;
background:pink;
}
.second{
width:283px;
overflow:hidden;
background:blue;
}enter code here
If your intention is to position the divs next to each other horizontally than you can't have any of them set to a width of 100% as the total of all elements next to each other can only total 100%.
If your website will be fixed width than your easiest solution would be to set the width of the left and right div in pixels to the (width of the site - 283) / 2. Then they would float next to each other. You could also do this with %.
However if your site is fluid width, then you would need to work out a percentage for all 3 divs i.e 33% each but this would mean the middle won't be exactly 283px.
The only way I can think to make this work exactly as you want would be to use Javascript to resize the elements after the page load which could then get the browser dimensions and work it all out.
Having read it a few times i think i get what you want to do.
You want he middle div to be centred between the two other divs.
you need to give the div a class something like this:
.middlediv
{
width: 283px;
margin-left: auto;
margin-right: auto;
}
which can also be written like this:
.middlediv
{
width: 283px;
margin: 0px auto;
}
Your question isn't clear, so I've done both possible interpretations: http://jsfiddle.net/EbBzY/
HTML
<h1>Option 1</h1>
<div class="main">
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</div>
<h1>Option 2</h1>
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
CSS
.main{
display:table;
width:100%;
margin-bottom:100px;
}
.main .content{
display:table-row;
}
.main .content div{
display:table-cell;
}
.first{
background:yellow;
}
.third{
background:pink;
}
.second{
background:blue;
width:283px;
margin:auto;
}
I have a main div, and three divs inside of it. They are all given a width 30%, and they are all centered within the main div.
I used display: inline-block; so that the three divs appear next to each other, but when I give them a height of anything, the two left-most go down a bit, and the right one stays where it should. All that's inside the divs is just simple inputs, nothing that could dynamically increase the div's size.
How should I fix this?
It's quite hard to work out the issue without any live code but give these a go. For the DIVs inside the main DIV, assign the class vertical-align:top
Another option (or as well as) is to set the line-height to the desired height rather than the height.
If you have no luck with these, I suggest you put your html and css up on jsfiddle.
Yes. the three inside divs must be floated to the left so that they should align exactly. without floating, they can create problems in different browsers.
CSS Code
#wrapper { width: 100%; height: auto; margin: 0; padding: 0;}
.inner { width: 30%; float:left; min-height:50px; margin:0 5px 0 0;}
HTML Code
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner" style=" margin:0;"></div>
</div>
Here's a working solution. http://jsfiddle.net/j3zjg/
<style>
#container{
width:500px;
height:300px;
border:1px solid red;
}
#container div{
width:30%;
float:left;
height:40px;
background:red;
margin-right:5px;
}
</style>
<div id="container">
<div></div>
<div></div>
<div></div>
</div>