Suppose the html code is
<div style="margin-left:10px;float: left; height:90px; width:0.5px;background-color:black;"></div>
<div style="float: left; height:90px; width:0.5px;background-color:black;margin-left:20px;"></div>
I only see one div with width 0.5px.
But If I change the width of second div to 1px then both are visible.
Could someone give me an explanation about what is happening here.
Related
I have 2 divs, one floating left(#div1) and the other floating right(#div2). I need to add a third div(#div3) which floats centrally over these. I am currently trying to use the z-index. However I am getting some strange effects like the div1 and div2 being forces down. Also the "container" div centrally aligns all child divs.
So for some code:
<div id="container" style="width: 980px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black;position:relative; top:0px, left:auto; z-index:1000">I look like a button and I float the other divs, in a central location</div>
</div>
I would really appreciate some guidance on the correct code for the above, to ensure that #div3 does float over #div1 and #div2, and is centrally located.
Thanks in advance.
First of all, the style attribute on 3rd div isn't closed.
Use ; to separate between style statements in the style attribute. And its color, not colour
I would also suggest using a css
Heres a codepen:
http://codepen.io/Vall3y/pen/QwWPYd
If you want the container to float in the center, its enough to give it margin: auto
Giving the 3rd div a width and auto margin will get your desired result I would assume. I also removed some unnecessary statements like position relative
#div3 {
border:1px solid black;
color:black;
margin: auto;
width: 30%;
}
Heres a codepen:
http://codepen.io/Vall3y/pen/gbOyEb
Also consider using display: flex and ditch the floats altogether
http://codepen.io/Vall3y/pen/ogNOVV
If you want to read more on flexbox I recommend the csstricks article http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think you need to add to #div3 display property: inline-block, and set text-align: center to #container, check it out here
No relative or absolutely positioned elements needed! This should give you what you want:
CSS:
#container{width: 580px; border:2px solid orange; height:350px;}
#div1{border:2px solid blue; width:260px; height:100px; float:left;}
#div2{border:2px solid green; width:260px; float:right; height:100px;}
#div3{border:1px solid black; width:100%; float:left; height:100px;}
HTML:
<div id="container" >
<div id="div3">I look like a button and I float the other divs, in a central location</div>
<div id="div1">Div1</div>
<div id="div2">Div3</div>
</div>
Heres a live demo:
http://jsfiddle.net/Lza5fz43/
You really should separate your CSS and HTML, but this is what I did...
Add width:inherit to your div3 and position:absolute:
<div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px">
<div id="div1" style="float:left">Div1</div>
<div id="div2" style="float:right">Div1</div>
<div id="div3" style="border:1px solid black;colour:black; top:0px, left:auto; z-index:1000; position:absolute; width:inherit;">I look like a button and I float the other divs, in a central location</div>
</div>
You can modify the width to adjust where you want div3 to land and therefore can center it between them if you want.
Working JSFiddle: http://jsfiddle.net/re2hkbgh/1/
If this isn't exactly what you want just play with the width to get the effect you want as this is the positioning you are asking for! :)
I have 2 div blocks that programmatically follow one after the other. by default they have is the width of 900px. In order to accommodate them to the width of the text, I put the
float: left;
or
display: inline-block;
div gets the width of the size of the text, but the lower div slides over the top lining up in a row.
PS I have a question-and-answer page, a question - one div, another answer.
http://i.imgur.com/cGb8cFg.png
just add this to html
<div style="display:block">
<div id="ques">Question</div>
<div id="answer">Answer</div>
</div>
and this is a css
#ques{ border:1px solid #000; height:80px;width:200px; margin-bottom:20px}
#answer{border:1px solid #000; height:80px; width:200px}
or see ur example here
I am building a responsive version of my website.
While I'm happy that most floating divs get forced down the screen, there are a few divs that I need to remain next to each other, even if the screen area is smaller than the total width of these divs. In this case, I want to scale them down, so that they fit the screen.
Essentially, here is the layout:
[___DIV 1___|___DIV 2___|___DIV 3___]
I want to make sure that when the screen area is small, they don't look like:
[___DIV 1___|
___DIV2___|
___DIV3___]
but that they look like:
[div1|div2|div3]
Each div is float:left; width:220px;
The three divs are sitting inside another container div with width:100%;
You can put all three divs in one container div and only set float: left on the container.
<div id="container" style="float: left">
<div id="div1" style="width: 33%">...</div>
<div id="div2" style="width: 33%">...</div>
<div id="div3" style="width: 33%">...</div>
</div>
<div id="div4" style="float: left">...</div>
Best way to achieve it is to assign width in percentage in that instance. It should look like :
float:left; width:33%;
It will solve your issue.
You can change width:220px; to width:33%
<div id="Main" style="float: left;width:100%;">
<div id="div1" style="float:left; width:33%;background:yellow;"></div>
<div id="div2" style="float:left; width:33%;background:blue;"></div>
<div id="div3" style="float:left; width:33%;background:grey;"></div>
</div>
Demo Link : HERE
All the other answers are based on percentage values of the width property.
I have completely another apporach here. Since you're designing a response layout you should not rely on percentage values especially when you're trying to fit 3 divs in one row. You should define key resolutions that you're aiming (e.g. smartphone, tablet - landscape/portrait) and design your layout in each of that resolution using media queries.
When using 33% method you're completely dependent on the device width. You'll never know what the exact width of a div will be so you can't predict how its content will behave.
EDIT:
Approach from your comment might look like this
div.column {
float: left;
width: 33%;
}
#media only screen and (min-width:660px) {
div.column {
width: 220px;
}
}
Change the float:left; width:220px; to something like float:left; width:40%;
It should stop them from moving lines.
change width:220px; to width:33%;. It will be more flexible. Whenever you scale your web browser, the three div will remain next to each other.
you need to set the width of those divs as a percentage, 33% that would make them scale according to their parent element
here's a jsfiddle, hope it helps!
.container{
width:100%;
}
.third{
float:left;
width:32%;
margin:0.65%;
}
http://jsfiddle.net/jcferrans/MSfmW/
I have a main div, and inside it..I have 3 divs
In normal view it works perfect i need the exact samething but for some reason if i resize my browser one div at the right side will float down i figure the reason for it but i don't know how to resolve it . floating down of div is due to the border i have give to the div but i have given the borders with perfect calculations but i don't know why still it happens
HTML
<div class="box">
<div class="box_top"></div>
<div class="box_left"></div>
<div class="box_right"></div>
</div>
CSS
.box{
width:500px;
height:300px;
}
.box_top{
width:500px;
height:49px;
border-bottom:rgb(239,239,239) 1px solid;
background-color:#636;
}
.box_left{
width: 249px;
height: 250px;
float:left;
background-color: #093;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}
.box_right{
width:250px;
height:250px;
float:left;
background-color:#006;
}
please go hear for the issue : http://jsfiddle.net/gtczu/
Add min-width: 500px; to .box, when the browser window gets smaller than 500px, the horizontal scrollbar will appear.
Check your updated Fiddle
It's because you are floating left without having a width set on the container. I would set a min-width or just a width on the containing div.
this is because the total width of all your inner divs get larger than the view port size when it is resized....thats why the last div is floating down when resized.try to express all width in percentage..i think this trick may work
sir,
i created a div tag in my html page and that displays a product.inside the product_box div i have two columns (lleft and right) using float.
both columns fit in the product_box dividing the container into two vertical halves.but when i type content in the right half the content comes out of the div if it is longer than one line.i want that i continue typing multiple lines and it fits inside the right half.
i dnt want the overflow:scroll; method or hidden as well coz the scroll bar looks very bad.
plz suggest a way to acheive this.
CSS:
#content_left .product_box {
margin-right: 10px;
}
.left {
float:left;
padding:10px;
width:178px;
height: 174px;
}
.right {
float:left;
padding:10px;
text-align:left;
width: 396px;
height: 136px;
}
HTML:
<div class="product_box">
<h3>Product Title</h3>
<div class="left">some content here</div>
<div class="right">
jhkdjfhkjhkjhkjhkhkhkhkjhkjhkjhkjhkhkhkh
</div>
<div class="cleaner"></div>
</div>
You can use min-hieght instead of height to ensure it gets minimum height and grows if the content increases...
and be sure too add float clearer like: <div style="clear:both"></div> after the floating divs... in order to make parent container take its height
Add an element at the end of your div with the style clear:both; ( and maybe height:1px; )