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.
Related
I have created a wrapper div (ctccon) within which I have two divs both floating left so that they are positioned next to each other. This works fine until I add an image or table inside the right div (conright) and then the added element gets pushed below the left div (conleft).
My css
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float:left;
width:40%;
font-size:0.7em;
}
.ctccon .conright {
float:left;
font-size:1em;
}
And my html (without added elements)
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div </div>
</div>
and with added elements
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="pic1.jpg"> </div>
</div>
I know it's probably something I haven't understood re floats but I have not found a solution. Any pointers?
-----update-------
I have since removed the image and added a table inside conright. Still getting the same issue as per the image below:
It will be better if you share an image of your error but:
I recreated your code with an image, and with a table, and it doesn't get push to the bottom of the other div.
But let me explain what might be happening to you:
1: You have 2 div that are pushed left, if one of them gets to have an space, it will put itself below your other div, why? because is pushed left!, if it is pushed left and there is nothing next to it. It will take that space and do what is intended to, float left.
2: If you want your div to stay to the right, put in your css code float RIGHT, and it will be in the right ignoring your left div (as long as it doesnot take the whole screen).
3: If your image takes more that the 60% left of the space the other div has available, it will get push to the button to be able to fit the image.
To solve your issue I think you can add this to your code in your conright div:
.ctccon .conright {
float:left;
font-size:1em;
width: 60%;
}
Why do you have to this this?, because if you dont specify the width of this div, and its content takes more space that 60%, it will get push to the bottom
Please if this doesn't answer your question provide a picture of your error.
that depends on the size of the image:
If the image plus the text become wider than the space left by the first div, it will go below the first div.
But you can add a width to the second div to avoid that - any width up to 60% should work.
Addition / snippet:
.ctccon {
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
overflow: hidden;
}
.ctccon .conleft {
float: left;
width: 40%;
font-size: 0.7em;
}
.ctccon .conright {
width: 60%;
float: left;
font-size: 1em;
}
<div class="ctccon">
<div class="conleft"> This is the left div </div>
<div class="conright">This is the right div <img src="http://placehold.it/400x300"> </div>
</div>
After trying to make the floats work, I just ended up using grids instead and modified the CSS code as follows:
.ctccon {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
font-family: 'Comfortaa', cursive;
color: #8c8c8c;
}
.conleft {
font-size:0.7em;
}
.conright {
font-size:1em;
}
Now I get the layout I intended to get:
The added benefit to doing it this way, I suppose, will be making it easier to make the website responsive. I am using scss and breakpoints so I'd just need to change the css slightly for each breakpoint.
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.
What I'm trying to do is have three divs wrapped in a fixed width container that will auto resize when the content in the middle div expands. As the middle gets larger the two beside it get smaller if that makes sense.
<div id="container">
<div class="one"/>
<div class="middle">...</div>
<div class="two"/>
</div>
Not sure if I should be using div or span for this.
Any advice on the CSS?
#thirtydot The two divs at the side of
the middle div will contain nothing,
just a border-top, the middle div will
contain two links. :)
In that case, I'm answering with something simpler that you might be able to use.
See: http://jsfiddle.net/uZ5dn/
<div class="container">
<span class="middle">content con tent the tent of cons content content</span>
</div>
.container {
border-top: 5px solid #f0f;
text-align: center;
}
.middle {
background: #fff;
display: inline-block;
position: relative;
top: -5px; /* same as border-top-width */
}
It's not awesome, but it might be good enough.
At the very least, I'll get a better idea of what to suggest next.
If I'm reading your question correctly, I suspect that you'll have to do this with JavaScript, and DIVS.
You can get and set the actual size of the DIVs in pixels using the .height() function.
So, you could do something like:
if ($('#div2').height() > 200) {
$('#div1').height(100);
$('#div3').height(100);
} else {
$('#div1').height(200);
$('#div3').height(200);
}
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.