I have a problem with css.
Let's assume the following structure
<div id='maincontainer'>
<div id='item'>
<div id='itemimage'> </div>
<div id='itemtext'> </div>
</div>
</div>
Now. For every item in the database it prints an item, with the corresponding image and text. Lets say i have 4 items in my database. It prints the first one fine, and the second, but the third and fourth get printed out of the container.
My maincontainer has a minimum height, which extends with the height of the itemdiv. But after two items, it stops extending.
Do you have any idea's.
#maincontainer {
font-size:11px;
font-family:Verdana;
margin-top:60px;
margin-left:auto;
margin-right:auto;
min-height:50px;
height:auto!important;
overflow:hidden;
width:650px;
position:relative;
color:#465258;
text-align:left;
border:1px solid black;
}
#item
{
height:170px;
width:650px;
position:relative;
clear:both;
}
#itemimage
{
float:left;
height:135px;
width:200px;
position:relative;
clear:both;
}
#item_text
{
color:#465258;
width:435px;
margin-top:-135px;
height:110px;
float:right;
position:relative;
padding-top:10px;
padding-bottom:10px;
clear:both;
}
Why do you need a height On the div? It should just stretch vertically to fit its contents. Unless you are using floats on the items and not containing them with float clearing methods.
Related
I am having problem understanding the height of element in div. I have a header div which has certain divs inside it.The div inside occupy certain height. Isn't the header supposed to cover the area occupied by the elements defined inside it when the height is not mentioned. As per my understanding the header is supposed to wrap all the div inside it.
Please correct me if I am wrong.
This is my body
<div style=" float:left; background-color:pink; width:20%; height:40px; ">
THis is left
</div>
<div style=" float:left; background-color:gray; width:70%; height:40px; " >
<div id="htop">
This is top
</div>
<div id="hbutt" >
this is buttom
</div>
</div>
And here goes style
#cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px; }
#header{ background-color:red; width:100%; padding:5px; }
#cont2{ background-color:blue; width:10%; height:auto; padding:5px; clear:both; }
#htop{ background-color:maroon; }
#hbutt{ background-color:purple; }
For output and possible change need https://jsfiddle.net/sum1/vmq3y2rv/
When you have floating DIVs inside any other DIV, then height does not calculated automatically for outer DIV, to make it you should add display:inline-block or display:table to outer DIV depending on your layout.
#header {
background-color:red;
width:100%;
padding:5px;
display:inline-block;
}
Check this https://jsfiddle.net/vmq3y2rv/1/
Yes this is true but when all elements are floated inside of the header it collapses.
.clearfix{
clear:both;
}
and then insert a div right before your header ends with a class of clearfix.
Jsfiddle is here
https://jsfiddle.net/kriscoulson/vmq3y2rv/2/
You can either use float:left or display:inline-block/table , It will be based on your requirements and layout.
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;
}
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
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 am trying to create a sort of a window, formed by multiple divs. I'm basically putting div after div in my cshtml page, and trying to set their positions in the .css files.
After a considerable effort, I managed to set the divs in their beautiful positions. But as soon as I start to put text, or dom element or whatever inside one of those divs, it changes its position, and pushes other divs, creates a mess.
I somehow managed to keep some by using float, but it is really difficult. Isn't there an easy way to manage the inside elements of a div? Why does the inside elements cause the container div to travel to other places?
Here's the .html and .css code. The divs are empty and positioned correctly. You can simply write "qwe" inside div id="fiyat"> for example and see what I'm talking about.
.html code:
<div id="tablodetay">
<div id="secimler">
</div>
<div id="parcacerceve">
</div>
<div id="resim">
</div>
<div id="ebatsecimvefiyat">
<div id="ebatsecim">
</div>
<div id="fiyat">
</div>
</div>
<div id="urunozellik">
</div>
</div>
.css code:
div#tablodetay div#secimler
{
border:1px solid #000000;
margin:2px;
display:block;
width:706px;
height:100px;
display:block;
}
div#tablodetay div#parcacerceve
{
border:1px solid #000000;
margin:2px;
display:inline-block;
width:86px;
height:400px;
}
div#tablodetay div#resim
{
border:1px solid #000000;
margin:2px;
height:400px;
width:400px;
display:inline-block;
}
div#tablodetay div#ebatsecimvefiyat
{
margin:2px;
height:402px;
width:200px;
display:inline-block;
}
div#tablodetay div#ebatsecim
{
border:1px solid #000000;
height:248px;
width:200px;
margin-bottom:2px;
}
div#tablodetay div#ebatsecim form input
{
float:left;
border:1px solid #000000;
}
div#tablodetay div#fiyat
{
border:1px solid #000000;
height:148px;
width:200px;
}
div#tablodetay div#urunozellik
{
border:1px solid #000000;
height:120px;
width:706px;
margin-top:-2px;
margin-left:2px;
}
You need to define css attributes for each div. To prevent it from changing size or position you need
div ... {
position:absolute;
left: 50px;
top:50px;
width:100px;
height:50%;
}
position:absolute; ignores all other divs and puts your div on the spot you define.
width and height are overruled if the overflow isnt set to none or scroll
The browser will use your width and height as starting point, not end point.
You could also try to set max-width and max-height.