I'm working on a little project for fun and ran into some trouble trying to get an image inside a <div> to float on the right side of said <div>. The problem is that it seems to ignore the container (the <div> it's in) and act as if it were part of the parent wrapper. What I want to happen is for the containing element to adjust it's height based on the image inside of it...I guess. Been toying with it but haven't had any luck.
HTML:
<div class="maincontentwrapper">
<!--First body article on page-->
<div class="contentpane">
<img src="images/welcomethumb_small.jpg" alt="" id="infoimg" />
Filler text. This is the only thing that<br />
seems to change the height of this div's<br />
border.
</div>
<!--Second body article on page-->
<div class="contentpane">
Text goes here.
</div>
</div>
CSS Code for all visible classes:
.maincontentwrapper {margin: 10px 333px 10px 10px;}
.contentpane {border: solid 2px red;
margin-bottom: 10px;
padding: 4px 4px 4px 4px;
text-indent: 1em;}
/* Thumbnail for first article on home page.
Margins set to push image to align ignoring the container's
border width and padding width. */
#infoimg {float: right;
width: 145px;
height: 150px;
margin: -6px -6px 4px 4px;}
/* End Main Content Styles */
EDIT: If you need a link to the website for clarification as to what the issue is I can certainly add it.
What I want to happen is for the containing element to adjust it's height based on the image inside of it
You need to clear below the image, like this: http://jsbin.com/iduvof/1/edit
There are several ways to do this, which you can read more about here.
The method that I have used is to add an extra div which has the property clear: both. This is probably not best practice as it's non-semantic markup, but it's easy!
Related
I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
I'm trying to make a layout where I have a Div that gets added its content in a dynamic way. I want this "parent" div to have a fixed height and when content its added the div grows horizontally as needed.
This is the test HTML I made to isolate the problem.
<html>
<head>
<link rel="stylesheet" href="styletest.css" />
</head>
<body>
<div style="width:700px;overflow:auto">
<div class="anio">
<div class = "semestre">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
</div>
</div>
</body>
</html>
Here i have 7 class=floater divs that go into the class=semestre container div which is supposed to grow horizontally as I add more class=floater divs. all of this goes into a fixed width div with overflow-x:auto.
after some fighting with the css i managed the following:
div.floater {
margin: 4px;
width: 110px;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{
white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
margin-top: 5px;
margin: 2px;
height: 90px;
border: 1px solid #ccc;
min-width:98%;
}
div.anio{
margin : 2px;
border: 1px solid #ccc;
min-width:98%;
}
So this worked..kind of.. the class=floater divs go horizontal and cause the activation of the overflow-x on the outermost div, but the container divs that contain the class=floater div don't grow as i think the should (this can be seen by the borders not growing). After googling I found some proposed solutions like adding width:auto on top of the min-width: css property or floating them, but none worked. This is a minor issue since the borders are just for formatting.
The mayor problem I'm having is when I try to add content to the class=floater divs they just go CRAZY and won't stay where they should( when they had no content). i tried reverting the white-space:nowrap by adding white-space:normal to the floater class but that didn't work. After that I just went berserk and started trying random stuff and managed to fix my first problem but the I forgot what I did and went back to step 1 D:.
To be honest I'm very new to html/css and I'm learning by doing. So if this question has been already asked/answered believe me that I searched for it. Also excuse my English, doing my best.
Thank you for your time.
edit:
By request, the fiddle :D http://jsfiddle.net/UBYKy/1/
there you can see both of my problems.
edit 2: i believe i have found a solution to both problems. For the first one I solved it by adding display: inline-block to the parent divs and for the 2nd problem I added vertical-lign:top to the floater class css(as afshin suggested) and it works just fine. I hope this helps anyone having the same problem.
I think you should use this
div.floater {
vertical-align:top;
margin: 4px;
min-width:110px;
width: auto;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
DEMO
Given some code like below, could someone show me how I could align the content-meta-wrapper inside of the content div at the TOP RIGHT corner and then have the content inside the content div wrap around it like in the image? The pink highlight in the image below is the content-meta-wrapper div.
<div id="content">
all the content you see except the Half BOX in the right hand side
<div id="content-meta-wrapper">
<div id="content-meta>
The right that is aligned at the TOP RIGHT of the content diva
<div>
<div>
</div>
The reason I can't just view source from the image is because the image is from how my site is now with moving some stuff around in Photoshop.
Assuming it's marked up inside of the content <div>, you just need to pass float: right; to it, and it should do the trick.
The code I used in This Example is the following:
#container { /* Pure Looks */
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#floated {
height: 100px;
width: 100px;
float: right; /* This is what counts!! */
background: red;
}
See this Awesome Article about Floats - by Chris Coyer of css-tricks.com
You should use the css rules,
float:left;
float:right;
these will align your divs in the correct postion, to keep things tidy make sure to give your div's a width.
I have a problem with simple Images in DIV containers in IE7.
I have it a few times on my homepage, here is an example:
<div id="divSearchBottomLinks" class="divSearchBottomLinks">
Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
<div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
<img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
style="border: 1px red solid;" />
</div>
</div>
CSS is:
.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}
Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg
As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.
I can't see how to fix it, I can only see from where it somes... any ideas?
For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.
Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.
Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -
http://meyerweb.com/eric/tools/css/reset/
Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.
I would try go with something like this instead:
<div id="bottomLinks">
<p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
</p>
<img src=".." />
</div>
<style>
div#bottomLinks {
overflow: hidden;
}
div#bottomLinks p {
float: left;
}
div#bottomLinks img {
float: right;
}
</style>
You're problem right now is probably because of the width of 99% and that the first element doesn't float.
I've got some problems while trying to lay out my site. I'm using Blueprint Framework and it happens when I apply borders to my div. Since their width are controlled by span-XX (or grid-xx as I noticed in 960gs), the moment I apply borders to any div element I have it goes out of the grid as seen in these images Click to zoom
Click to zoom
The only way I know to fix it is to change element's width, but then the framework's grid purpose finishes 'cause I won't have the span-XX classes anymore. Is there any other way to fix it?
If I understand it right, you have a span-24 or something similar and want to add a border to it, right? My preferred way of doing it is
<div class="span-24">
<div class="box">here</div>
</div>
and add the border to the box class for above snippet.
If you don't want to nest divs, you can create a few additional classes for bordered columns. I'm using 1px borders, so I created classes like:
.with-border-first {
border: 1px solid red;
margin-right: 8px;
}
.with-border {
border: 1px solid red;
margin-left: -1px;
margin-right: 9px;
}
.with-border-last {
border: 1px solid red;
margin-left: -2px;
}
There should be one more if you want borders around divs spanning all columns (eg. 24 in blueprint).
I then use those classes together with the spans, for example:
<div class="span-8 with-border-first">
...
</div>
<div class="span-8 with-border">
...
</div>
<div class="span-8 last with-border-last">
...
</div>