I'm trying to have an image, and then to the right of the image I want a div box to be there. I've been trying to search for the reason for this, but I cannot find it. I'm assuming div's can't be floated next to images for some reason because I've successfully done it with text.
http://jsfiddle.net/n8ZDQ/1/
(you can see the red div box is actually mostly behind the image, only part of it is popping out the right side)
HTML:
<img src="http://stignatiusyardley.org/pictures/NFP/NFP%20family%20image.jpg" style="float:left;width:370px;height:246px;" />
CSS:
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
}
The div itself is not floating! Try adding float: left to #optin.
The DIV is a block level element by default. Only inline or inline-block elements will display the way you want. To get the effect you need, you need to either make the DIV display: inline-block or float: left.
Adjust the css of #optin to float as well
#optin {
width:466px;
border:1px solid #CCCCCC;
height:166px;
background-color:red;
float: left;
}
Related
I put a header which contains three divs. One has an image and the other two contain text.I then tried putting an image under it which has the same width of the header. But when I first put it, it was over the header div( I thought it should go under it). I then tried pushing it down by increasing the top margin and it worked. But as I increase the width of it the text in the header moves although it is not touching it!
This is the html code:
<div id="header">
<img id="logo" src="...."> <!---the logo at the top right-->
<div id="name">JANE DOETTE<div> <!---the text that moves - top left -->
<div id="job">Front-End Ninja</div> <!--under the text that moves but doesn't move--->
</div>
<img id="image" src="...."> <!---the image-->
This is the css code:
#header {
height: 6em;
width:80%;
background-color: white;
margin-left:10%;
margin-right:10%;
border-bottom:2px solid #BCBBBB;
margin-bottom:10px;
}
#image{
margin-left:10%;
margin-right:10%;
height:10em;
width:80%;
}
#logo {
height:88px;
width:89px;
}
#name {
color: #BCBBBB;
text-align:left;
float:right;
font-size:2.7em;
font-family:sans-serif;
height:50%;
}
#job {
color: #BCBBBB;
text-align:left;
float:right;
font-size:0.5em;
font-family:sans-serif;
font-weight:bold;
margin-top:0.2em;
}
Those are my questions:
Why doesn't the image automatically go under the header div?
Why does the text move?
Why is the top text the one that moved although the one at the bottom is nearer to the image?
What should I do to get the image under the heading div?
I adjusted the width of the image to 80%. But it seems to be just 20%. Why?
Has it got anything to do with position or display?
***Sorry for not adding an image of it but I don't have a reputation of more than 10 ( I am not allowed to).
***Sorry for the long questions.( I am still a beginner).
***Your answers would be much appreciated.
Your question isn't all that clear (please clarify), I will try to answer regardless, but I might misrepresent your question.
1 / 6 . The biggest problem you have I think is that you don't tell the browser how to 'order' the divs. Should they be under eachother or next to eachother? Use the "display" property for this. Use "display: block" to make sure that page-elements like divs or images are stacked under eachother. Depending on the margin the browser uses the remaining space to stack elements next or above eachother.
2 / 3. Because it floats. A float is relative to other elements on the page. If you make it float right, but the content within it align to the left the box goes left while the content within it stays as far to the left as it can keeping with the contraints of the div container. Therefore it seems to move. Lose the float and use "display: block" to make the div be the full width of the header div.
#name {
color: #BCBBBB;
text-align:left;
font-size:2.7em;
font-family:sans-serif;
height:50%;
display: block;
padding-left: 10px;
}
4 / 5 . Lose the "height" property of the image. Because the image has a relative 'height' property next to a relative 'width' property it distorts the image scaling. Use only the width as a percentage and it will scale proportionally.
You are missing a slash. Instead of
<div id="name">JANE DOETTE<div>
it should be:
<div id="name">JANE DOETTE</div>
After adding the slash it appears fine to me in Chrome and Firefox (except for the missing images obviously). See fiddle. Does that solve all of your questions?
I have a div on my page that should have some small divs inside it, with a line of text, images and another line of text, everything centered.
But by some weird reason, the div doesn't wrap around the text even if floated, it looks like it haves the same width as the full-scale image, instead of wrapping around the now smaller image.
<div id="real">
<div class="relspn">
Title:<br/>
<img src="img.png"/><br/>
Another text
</div>
<div class="relspn">
Title:<br/>
<img src="img.png"/><img src="img.png"/><br/>
Another Text Another Text
</div>
</div>
Something like that, but, it doesnt matter if I float the divs, set them as inline-blocks or even inline, the div doesn't gets smaller than the full image.
Here's the css:
#real {
float: right;
position:relative;
width:96%;
padding:20px 0;
}
.relspn {
position:relative;
text-align:center;
float:left;
padding:0.2%;
}
.relspn img {
position:relative;
display:inline;
width:10%;
}
I don't know what's happening, help.
Edit:
http://jsfiddle.net/3SkZV/1/
Updated now, I wrote the div class wrong in the example. >.>
Updated the Fiddle too
I have two boxes, they are stacked vertically. I want the top div to have a box shadow on its bottom edge. The top box's shadow is hidden behind the bottom box.
How do I fix this?
You can use:
either
#first{
position:relative;
z-index:2;
}
or
#second{
margin-top:10px;
}
PS: Sorry for the previous answer mistakes. - Example shown: http://jsfiddle.net/fdezluis96/FRQKA/
Good luck!
Or just add a margin-bottom: 10px or something to top div
I am trying to position few elements correctly, here is my code: http://jsfiddle.net/Tjz6D/
Now the problem is that block_under doesn't go below image, i've noticed that if delete all floats everything is fine but i need floats for two divs that contains text to be in the same level as image.
So what's causing block_under to overlap with image?
Add the clear property:
#block_under{
outline:1px solid green;
clear: both;
}
Use clear:both on the block_under element.
Demo at http://jsfiddle.net/gaby/Tjz6D/1/
I have used a wrapper to center div tags and it works for everything except the css in the link
Please check out:
http://jsfiddle.net/T5rBU/3/
As you can see the pink box with text is in the center but the black box isn't.
I have put
float: left;
but that is only because if I don't the black box doesn't show!?
try this:
.center div {
display:inline-block;
text-align:center;
}
it seams to work:
http://jsfiddle.net/u3ggV/
add a with to .center
.center {width:400px;}
or another width you cant center div with text-align
I don't quite follow what you mean but I think it could be down to not having a wrapping element to hold both divs - http://jsfiddle.net/djsbaker/T5rBU/4/
Did you want the black box beside or above/below the navigation?