I need to place 2 fixed width DIVs side by side inside another big fixed width DIV and it is working. This is the code that I have written :
<div id="mainDiv">
<div id="divLeft"> <img src="bla bla bla" > </div>
<div id="divRight"> Normal Text Here..... </div>
</div>
This is the CSS:
#mainDiv { width:1100;overflow:hidden; }
#divLeft { width:720; float:left;}
#divRight { width:380; float:right;}
The problem is, when I placed the image of size 720X480 into the first DIV, the height of the first DIV ("divLeft") is becoming 485. Why its giving an extra
5px ?
You can view the page here : http://www.touchmedia.ca/TestPos.php
Please Note the following:
I did overflow:hidden for the main div, b'cos, otherwise, the float will remove the effect of outer div.
I have hardcoded only the width and not the height.
main div width (1100) = left div width (720) + right div width (380)
Thanks a lot,
Isaac
Add:
#divLeft img {
display: block;
}
add this to your style sheet:
body{
margin:0;
padding:0;
}
Related
how would I go about placing an image vertically between 2 section divs so that I can accomplish the following:
Set the exact width in which the image overlaps the section. Example - I want 30% of the height of the image to be part of the top div and 70% of the height of the image to be on the bottom div
Have consistency on all screen sizes/browsers for the above goal
Here's an example to illustrate what I mean:
From what I've read and seen, a lot of people just set margin to be a negative pixel amount or use top/bottom and set a pixel amount but i dont think this is compatible across screen sizes
thanks a lot for the help, it means a lot
Try this you can insert image in div having id img
#div1{width:400px;height:100px;background:red;}
#div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;}
#image{width:40px;height:40px;background:green;position:relative;
margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}
<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>
USING % FOR WIDTH
#div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
#div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
#image{position:absolute;bottom:-20%;/* 2/3=66.6 */
left:35%;z-index:4;
width:30%;
height:30%;background:green;
}
<div id="div1"> <div id="image"></div></div>
<div id="div2"></div>
You can add 2 parents around the image element, one with position:relative; and another (nested div) with position:absolute;. then for img tag, apply margin-top:-30%; to place it at desired position.
To center the image: we set left:50% to inner div (parent of image) and set margin-left:-50%; for image as shown here:
#div1 {background: #e0f0e0; padding: 1em;}
#div2 {background: #e0e0f0; padding: 1em;}
#divImg {position:relative; border:1px solid red; }
#divImg2 {position:absolute; border:1px solid blue; left:50% }
#divImg img { margin-left:-50%; margin-top:-30%; }
<div id="div1">Section 1<br/>Contents of div1 ...<br/><br/>123<br/>456<br/></div>
<div id="divImg">
<div id="divImg2">
<img src="http://triptopersia.com/wp-content/uploads/2016/04/Iranian-Cheetah-2.jpg" style="width:150px" />
</div>
</div>
<div id="div2">
Section 2<br/>Contents of div2 ...<br/>
<br/>
ABCD<br/>EFGH<br/>
123<br/>456<br/>
</div>
The red line indicates border of first position:relative div (divImg)
The blue line indicates border of second position:absolute div (divImg2)
The final position of img element is shifted relative to second div by margin-left:-50%; margin-top:-30%;
Here's my html and css code :
<div id="navigation_header">
.....<br>
.....<br>
.....<br>
</div>
<div id="main_page">
**********
</div>
#navigation_header {
float:left;
}
#main_page {
float:left;
}
As you can see ,the main_page is right to the navigation bar.
However when I resize the browser window , as the width goes smaller , the main_page will appear at the bottom of navigation bar.
How can I make the main page fixed right to navigation bar as I change the window size.
PS: I created a fiddle for this, check it http://jsfiddle.net/E83dH/
For what you want you should wrap both elements with a DIV and style with a min-width:
.wrap { width:100%; min-width:300px;} // * min-width should be the combined width of both elements.
http://jsfiddle.net/T87q5/
check out the demo
Rather than float your #main_page, give it an overflow property. It will take up all of and only the available width.
#main_page {
overflow:hidden;
}
JSFiddle
You have to provide % width if you want to change the size of div too according to the screen width.
Here is the css
#navigation_header {
float:left;
width:30%;
}
#main_page {
float:left;
width:70%;
}
You can check it here [jsfiddle]http://jsfiddle.net/E83dH/1/
What I would suggest you do instead is put both things inside a container and give the container a min width. Infact give all your div's a min-width
http://jsfiddle.net/E83dH/3/
HTML
<div class='container'>
<div id="navigation_header">.....
<br>.....
<br>.....
<br>
</div>
<div id="main_page">**********</div>
</div>
CSS
#navigation_header {
float:left;
}
#main_page {
float:left;
}
.container {
min-width:300px;
}
This will ensure that you get a scrollbar at the bottom but the second div doesn't come below. Note that the min-width should be the sum width of the two elements at the point when the second element comes below the first.
Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.
http://jsfiddle.net/6x8Dm/
HTML
<div class="wrapper">
<div class="column">
<img src="http://www.lorempixel.com/200/200/" />
</div>
</div>
CSS
.wrapper {
width:200px;
margin:0 auto;
}
.column {
width:100%;
background:#cc0000;
}
img {
width:100%;
}
That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:
add a vertical-align:top rule to the image jsFiddle example
add font-size:0; to the containing div jsFiddle example
add display:block; to the image jsFiddle example
One way is by setting display:block on the img, causing it to fill the parent.
jsFiddle here - it works.
img {
width:100%;
display:block;
}
Alternatively, if you don't like that approach, you can also change the vertical alignment, as the default is baseline.
I have a jsfiddle here - http://jsfiddle.net/stevea/Jpu5b/2/ - with a DIV that contains another DIV that contains an img. I haven't specified the width or height of the inner DIV so it takes on the width of the parent DIV and the height of the img it contains.
<div id='box'>
<div id='innerBox'>
<img id='cateye' src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg'/>
</div>
</div>
My question is, why is the height of the inner div about 5px larger than the img it contains?
If you want to keep img as an inline element just add line-height: 0; to your reset.
So it would look like this:
* {
margin:0px;
padding:0px;
line-height: 0;
}
Here is the updated fiddle http://jsfiddle.net/Jpu5b/18/
Otherwise Michael St Clairs's answer will work well.
Add this code and it should fix it
#cateye {
display:block;
}
<style>
.header {
float:left;
width:50%;
border:1px solid black;
}
</style>
<div style="width:100%;">
<div class="header">Hello</div>
<div class="header">World</div>
</div>
I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?
The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.
Demo: http://jsfiddle.net/rfSMX/1/
You may run into the 100% combined width issue in IE.
Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide. Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.
Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.
Add an extra div inside the divs that need a border called header-inner.
<style>
.header {
float:left;
width:50%;
}
.header-inner {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div style="width:100%;">
<div class="header"><div class="header-inner">
Hello
</div></div>
<div class="header"><div class="header-inner">
World
</div></div>
</div>
This could work:
because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side