I created a div id="A" and div id="B" and placed the latter div inside div A. Div A has a background-color attribute, but the inside div shows up as its own separate div without the A's background-color. I thought a div within a div would take the attributes of parent div. Instead, div A shows up with 0 height on the browser. The divs below follow the same structure and are just named differently: 'AboutPictures'(A) and 'ya'(B)
<div id="AboutPictures">
<div id="ya">
<img style='border:5px solid #F00' src="http://41.media.tumblr.com/3ad1ef80a08560a7e5f6be2b31f13c2/tumblr_n5wto2Ukmf1txjmgjo1_1280.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<figure>
<figcaption>Hello I am Edward</figcaption>
</figure>
</div>
</div>
CSS:
#AboutPictures {
background-color: rgb(0,200,255);
height:100%;
}
#ya{
float:right;
}
#ya figure{
float:right;
}
Since your #ya div is floated, the parent div just sees empty content. You need to clear the #AboutPictures div, by applying the clear: both style. See: What is a clearfix?
Working example:
<div id="AboutPictures">
<div id="ya">
<img style='border:5px solid #F00' src="https://placehold.it/350x150">
<div style="clear: both;"></div>
<figure>
<figcaption>Hello I am Edward</figcaption>
</figure>
</div>
<div style="clear: both;"></div>
</div>
Hey there are different possibilities to solve this:
you could add a float: right / left; to your outer div (#AboutPictures)
or you could set it to display: inline-block;
See this fiddle: https://jsfiddle.net/8j2zpfdg/
Another SO answer as reference: How to make div not larger than its contents?
Related
So I have the following structure:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
</div>
With no CSS, the containing div extends to the image height, which is on the left side of the div.
Now I want to put that image on the right of the div instead of the natural left. If I use float: right; on the .logo class, the <a> element is taken out of the flow so my containing div won't extend to the picture height anymore (it will have a height=0).
I tried to wrap the <a> element into another div and give the logo class to it (in case it needs to be a block element), but same behaviour.
So I'm realizing I have no idea how to attach an element on the right of its container, with the container still taking into account the dimensions of said element. Is it possible?
You're doing fine, you just need a clearing element before you close your container in order to make the floated elements "occupy" the parent's space. Something like this should work:
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="redacted" style="border:none;">
</a>
<div class="clear"></div>
</div>
CSS
.clear {clear: both;}
In case of images, you can use the traditional html align="right" tag to put the image on right side of the content and keep the other aspects of styling the same.
The align="right" tag goes in the IMG html element.
Given this CSS:
.logo {
float: right;
}
… you can get the div to grow by adding this CSS:
#bannerLogin {
overflow: hidden;
}
That's due to the fact that an overflow with a value different from visible creates a new block formatting context.
Snippet
#bannerLogin {
background: #fed;
border: 1px solid black;
overflow: hidden;
}
.logo {
float: right;
}
<div id="bannerLogin" class="topBannerAnon">
<a href="http://www.redacted.fr/" class="logo" target="_blank">
<img src="http://placehold.it/100x100" style="border:none;">
</a>
</div>
I have div which includes:
<div class="field-content">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content.
When img-tag exists then image is positioned at top of field-content and tile_content is under image.
This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.
Any ideas/tips how to make this work?
My CSS:
.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;
.tile_content {
}
The only Thing you Need to know is vertical centering of div. This Problem is already solved here:
How to vertically center a div for all browsers?
You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:
<div class="field-content has-image">
<a href="http://url.com">
<img width="320" height="194" src="http://img.jpg"></img>
<div class="tile_content">
<div class="tile_title">content</div>
<div class="tile_body">content</div>
</div>
</a>
</div>
So your CSS Looks like
.field-content.has-image {
}
If I got your question correct, then simply,
Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse
OK, first time, I took it other way, I thought there are 3 divs, Sorry for that.
Here is the fiddle link:
enter code here
http://jsfiddle.net/happy2deepak/6U3kw/1/
What I like to do is to use a DIV's vs. Table.
I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.
I have the following code but seems like the image comes and then the text comes below it:
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="clear:left"></div>
<div style="float:left">
%#Eval("title")
</div>
<div style="clear:left"></div>
You could use a float/overflow trick:
<div class="imgCont">
<img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">
%#Eval("title")
</div>
I used classes instead of inline styling:
.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}
JSFiddle
You just need to remove the first
<div style="clear:left"></div>
HTML :
<div id="wrapper">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
<div>image</div>
</div>
CSS :
#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
I don't understand why you have this 2 divs:
<div style="clear:left"></div>
They just prevent your text div and your image div to be on the same row. Css property "clear" make your container to NEVER have another container floating, here on his left.
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="float:left">
%#Eval("title")
</div>
It would be enough
Here is the answer!
Obviously use div. Here is a simple example!
You can first create a parent div then inside that parent div, you can create 2 divs like
<div>
<div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
<div class="float-right">The text that would flow at the right side..</div>
</div>
Here is the CSS for that.
You will be displaying them inline! I mean one div on left other on right!
You will be displaying the text on the top corner! Which means no margin-top for the text div.
Here is the CSS code:
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-left, .float-right {
display: inline; // use inline-block if you want to add padding or margins..
}
This way, the div with the image will align to the left and the other div will be placed to the right side! And they both will be in a line. As you want them to be.
Good luck, cheers! :)
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.
I don't really understand why my float: right; div is below container div. I have no idea how to fix this. Can someone please explain? I had this problem long time ago on another website, but totally forgot how I managed to fix it if I did it at all. I want it to be inside the container of course.
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
</div>
-
#menu
{
width: 960px;
height: 70px;
margin: auto;
background-color: blue;
}
#menu .thumb
{
background-color: aqua;
float: right;
height: 60px;
width: 400px;
}
You should read this web page: https://css-tricks.com/all-about-floats/
The most important part is this:
The Great Collapse
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing.
You can usually fix this by adding a "clearing" div at the end of your container, like this:
<div id="menu">
<div class="categories"></div>
<img class="logo" src="#" />
<div class="thumb"></div>
<div style="clear: both;"></div>
</div>
When you float an element, it loses all height. Therefore, the container does not know to expand to contain it. You must give the container a height large enough to contain the floated element.
Alternately, you can include a clearing div just below your floated element. This is the "so-called" clearfix, and will force the container to contain the floated element as expected.
To add a clearing div, you can add the following to your markup:
<div class="thumb"></div>
<div class="clearfix"> </div> <!-- Add this line -->
</div>
and in your CSS:
.clearfix {
clear: both;
font-size: 1px;
}
float: right; will move the element to the right of the non-floating elements after it (I am talking about HTML markup). See if this works:
<div id="menu">
<div class="thumb"></div>
<div class="categories"></div>
<img class="logo" src="#" />
</div>
Use floats for all your main divs, and have overflow: hidden for your #container