It doesn't stay where I want it, look at this:
<div style="float: left; width: 30%">
<img src="{avatar}" alt="" />
</div>
<div style="float:right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
Internet Explorer:
Mozilla Firefox:
I want the text to be in the top (tried vertical-align: top), and i'd like the image to be in the white box in IE.
Hope someone more skilled can help me out.
Thanks!
Can't figure out the problem :/
Edit: Added whole code
* { padding: 0; margin: 0; }
body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}
#content {
width: 400px;
}
.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}
div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}
<div id="content">
<div class="header">{title}</div>
<div class="thread-content">
<div style="float: left; width: 30%; padding: 5px">
<img src="{avatar}" alt="user avatar" />
</div>
<div style="float: right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
</div>
</div>
Be sure the margin of both are set to 0:
<img src="{avatar}" alt="" style="float: left; width: 30%; margin: 0px"/>
<div style="float:right; width: 70%; text-align: left; margin: 0px">
{message}
</div>
<div style="clear:both"></div>
As css can be really tricky, some other solutions to try:
Let both float left, should make no difference.
Make sure the border doesn't increase the size.
Descrease the width of one a bit, IE is stubborn.
This happens because the sum of the (external) widths of the two floating divs is larger than the internal width of the external box, so they don't fit in the same row.
Try increasing the width of the external div, decreasing its padding, decreasing the width or margin or padding of the internal boxes.
Code works fine when I tried it. You sure there isn't any padding or margin on the image or the text? That would mess up the percentages you're using. If you have it examine the image and text in Firebug to see what styles are being applied.
When you say width: 30% or width: 70% it implies the width of the content inside the div excluding the padding, border and margin of the div. Looking at the images I am sure you have added some padding etc to both divs. Also I do not see any 'background: #fff' in your code, so I am not sure which one is the 'white' box.
Ok, did I get voted down because I used a table?
I am not by trade a designer, I am actually a programmer and I know there are hard-core css designers that cringe at the idea of using a table layout but it seems to works for me. The graphic designers that I work with give auto generated table layout from fireworks to work with which is a real pain.
Anyway the way I personally would try to accomplish the dersired effect though pure css would be more like.
<html>
<head>
<title>SandBox</title>
<style type="text/css">
#outerDiv
{
margin:0;
background-image:url(myImage.gif);
background-position:top left;
background-repeat:no-repeat;
padding-left:30%;
min-height:200px;
background-color:#777777;
}
#innerDiv
{
background-color:#333333;
}
</style>
</head>
<body>
<div id="container" style="width:500px;">
<div id="outerDiv">
<div id="innerDiv">content goes here</div>
</div>
</div>
</body>
Note: I am not a designer. I also made this a wiki. So please edit or at least leave a comment if you going to vote down.
Related
I dont really understand how is possible that a
<div style="clear:both"></div>
doesn't work in Chrome. I have this layout:
<div id="header">...</div>
<div id="content">
<div id="col1">...</div> <!-- float left -->
<div id="col2">...</div> <!-- float left -->
<div id="col3">...</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>
So, I've used the clear:both before the footer and/or after the col3.
It does not work either in IE7 but, in this moment I dont really care.
Can anyone help me please?
I Add more informations:
#content {
padding-top: 19px;
display: block;
}
#col1,
#col3 {
width: 21%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
#col2 {
width: 58%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow...
Hope i ve been clear in the explanation..
However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
It actually works. You are just not using it properly.
If you use clear:both the following element will be effected only. So for instance,
floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left
Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.
Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".
http://jsfiddle.net/6VjSL/
clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/
Can you post a link to your site, or your full actual code?
CSS:
div {
border: 1px solid black;
}
.floaty {
height: 50px;
width: 50px;
float: left;
background: green;
}
.cleary {
height: 100px;
width: 200px;
clear: both;
background: cyan;
}
HTML
<html>
<head>
</head>
<body>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="cleary">Cleary</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
</body>
</html>
use clear:none; in the css property. It will work in chrome
Is better for semantic to use a class for this things. The correct way to go is:
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div id="col1">...</div> <--- float left
<div id="col2">...</div> <--- float left
<div id="col3">...</div> <--- float left
<div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>
CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.
Then it does not work anywhere ? :o)
You are probably applying the float:left to the clear:both divs too...
this works in all browsers:
http://jsfiddle.net/kKwkd/
HTML
<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
<div id="col1">bbb</div> <!-- float left -->
<div id="col2">ccc</div> <!-- float left -->
<div id="col3">ddd</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>
CSS
#header, #footer{
border: 1px dashed blue;
}
#col1,#col2,#col3{
float: left;
border: 1px solid red;
padding: 50px;
margin: 10px;
}
the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
Okay now, I've got kind of a big one.
I'm working off a base wireframe (attached) and I'm having trouble implementing this layout. Basically, we've got a container div that has several more divs inside of it. Each of the interior divs are the components of the product and all have the exact same structured content flow - an image, title of the product, and links to the documentation. In the wireframe there are 7 component divs displayed (one is kinda hidden under my MSPAINT).
Desired achievements
The title and links must float next to the image icon, regardless of font size/line-height of the text of either.
The title MUST stay on one line. It is not allowed to wrap.
The interior divs must line up next to each other until they don't fit anymore, then wrap to the next line.
I can dynamically load content into the container div, but that div needs to be able to handle differing numbers of components. When users select product type and version, the number of components can and will change.
What is known
Some component titles will be short (7-ish chars) some will be long (27-ish chars).
All icons will be roughly 50x50 px.
There will be, at most, 8-9 component divs for some selected products.
There will be, at fewest, 3 component divs for some selected products.
Things I've given up on
Fine, we can fix the width and height of the component divs, see if I care.
Multiple divs. Whatever. The component divs don't need to have more nested divs. I'm an idiot and that was foolishness (I'm sure the answer is a component div with only an image and 2 paragraph elements, with the image floating left).
The code I've developed is huge and ugly as I've tried and commented out many things. Here's a jsFiddle with some generic code that I think has a minimal amount of damage done to it.
HTML
<div id="container">
<div class="component" id="1">
<div class="icon">
<img src="img.png"></a>
</div>
<div class="title">
<p>Product Item #1</p>
</div>
<div class="links">
<p>HTML PDF</p>
</div>
</div>
<div class="component" id="2">
<div class="icon">
<img src="img.png"></a>
</div>
<div class="title">
<p>Product Item 2</p>
</div>
<div class="links">
<p>HTML PDF</p>
</div>
</div>
...
// More component divs here.
</div>
CSS
#container {
border: 1px solid red;
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 900px;
}
.component {
border: 1px solid black;
margin: 3px;
overflow: auto;
float: left;
padding: 3px;
}
.icon {
float: left;
}
Thanks so much for your help!
Maybe I would have done something like this FIDDLE
Component structure:
<div class="component" id="1">
<img class="icon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/SemiPD-icon.svg/50px-SemiPD-icon.svg.png">
<h1 class="title">Generic Product Name #1</h1>
<p class="links">
HTMLPDF
</p>
</div>
I made also some changes to the css part:
#container {
border: 1px solid red;
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 600px;
padding-bottom: 3px;
}
.component {
border: 1px solid black;
margin-top: 3px;
margin-left: 3px;
overflow: auto;
float: left;
padding: 5px;
}
.title {
margin-left: 55px;
font-size: 1.0em;
font-weight: bold;
}
.links {
margin-left: 55px;
}
.icon {
float: left;
}
I'm stuck again with css positioning. I would like to create a page which shows one in the middle, surrounded by 10 other ones. Of course, it should look the same on every resolution (mobiles excluded).
But as i change the screensize, the site keeps on changing its look.
HTML
<div class="wrapper" id="wrapper">
<div class="element" id="element-1">Lorem1</div>
<div class="element" id="element-2">Ipsum2</div>
<div class="element" id="element-3">Lorem3</div>
<div class="element" id="element-4">Ipsum4</div>
<div class="element" id="element-5">Lorem5</div>
<span class="break"></span>
<div class="background" id="background"><span>Neologizmo</span></div>
<div class="element" id="element-8">Ipsum8</div>
<div class="element" id="element-9">Lorem9</div>
<span class="break"></span>
<div class="element" id="element-10">M10</div>
<div class="element" id="element-11">M11</div>
<div class="element" id="element-12">12</div>
</div>
CSS
http://nopaste.info/f6d200c414.html
Oups, already accepted an answer :$
Well anyway, since I was working on it, here is a generic solution. The idea is that you always have numberOfsquares/2 -1 squares at the top and bottom, and always one square on the left and one square on the right.
here is a fiddle: http://jsfiddle.net/PyU87/
It will display depending on the wrapper size which depends on the browser size. So this would also work on smartphones.
How does this work? You said you didn't want layouts to change as the screen changes size so I made it use fixed widths and be inside a wrapper so that can't happen.
DEMO
#wrapper {
width: 450px;
height: auto;
padding: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 5px;
}
#background {
width: 212px;
padding: 0;
}
I got this CSS layout: http://www.cssdesk.com/Lgg4q
HTML
<div id="wrap">
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
</div>
CSS
body {
background-color: grey;
font: 18px/ Times;
color: black;
}
body, html {
height: 100%;
width: 100%;
}
p { text-align: justify; }
#wrap {
width: 80%;
margin-left: 10%;
padding-top: 2%;
position: absolute;
font-size: 14px;
background: yellow;
}
.info {
margin-right: 5%;
padding-top: 2%;
float: left;
}
.img-wrap {
position: relative;
display: inline-block;
max-width: 100%;
float: left;
margin-right: 1%;
margin-top: 1%;
}
When you resize the browser window (smaller), you can see that the behavior of the divs basically breaks the design. How to handle this problem?
My thought was to give the #wrap a height, but that won't work like it should.
Here's how I'd do it. http://jsfiddle.net/joplomacedo/TYjd5/ (I couldn't figure out how to save the changes in cssdesk so I transfered it into jsfiddle)
Basically, I added a 'wrapper', which I called block around each of the image and info blocks. I gave them a width and floated them. This way, when the browser is resized, the info and the image always go together.
Was this the behavior you were looking for. What would you want to happen on the browser resizing?
You can use min-width on #wrap and set a pixel value to prevent it from breaking.
DIV elements don't behave well when used with percentages or I can say they are not meant to be used so. You have two options in this kind of situation:
Make the design of your page in such a way that it looks like it's not responding to the browser's window resize. Take as an example this very website.
Resize your containers accordingly when the browser's window is resized. To do this you will need to use Media Css classes or maybe jQuery.
I am attempting a very simple procedure here, basically trying to center the client logos within this main clients div. I've just recently started with this web design business and while I can read some of the solutions out there, I'm having trouble applying them to my structure.
Basically I have a few client boxes, each is going to have a PNG image inside of them:
<div id="clients">
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
</div>
I'd like to be able to center the client-box's on the client's div that has a fixed weight. I've tried using display: inline-block but that didn't seem to do much. I'm assuming that's because I've already forced them to float: left but I don't know how I can maintain their position in the div without doing so. Like I said I'm quite a novice with CSS and this is what I've been doing for all my CSS.
Here's what I have for clients and client-box CSS:
#clients {
background-image: url("img/images/clients_bg.png");
border-bottom: 1px solid #333333;
border-top: 1px solid #666666;
float: left;
margin-top: 120px;
padding: 10px;
width: 778px;
}
.client-box {
background: none repeat scroll 0 0 #bcb546;
float: left;
font-family: verdana;
font-size: 11px;
height: 60px;
margin-right: 10px;
opacity: 0.8;
padding-top: 40px;
text-align: center;
width: 100px;
}
.client-box:hover {
opacity: 1;
}
From my understanding, this shouldn't be hard to achieve, but so far I have not had any luck probably because my brain is fixated on a certain way of doing things and it just won't budge. Any help would be greatly appreciated.
You can see the live site here.
Thank you SO.
I've tried using display: inline-block
but that didn't seem to do much.
float: left forces display: block, so display: inline-block would have no effect.
On .client-box, you need to:
remove float: left
add display: inline-block.
Finally, on the parent element (#clients), you need to add text-align: center.
If your outer div is of a fixed width you can set the margins for the inner div to take up the appropriate space.
eg:
<div class="outer">
<div class="inner">
stuff
</div>
</div>
CSS
.outer { width: 600px; }
.inner { width: 400px; margin-left: 100px; margin-right: 100px; }
Alternatively you can use margin-left: auto; margin-right: auto; however that (like everything else in the world) doesn't work in IE.
Hope this helps!
I will add a wrapper to the client-boxes, whose width is equal to the total width of client-boxes.
For example, in the live site you post above, there are 5 client boxes, and each of them are 100px width with 10px margin-right. So add a div wrapper with width 5 x (100 +10) = 550px, and center the wrapper with "margin-left:auot" and "margin-right:auto".
<div style="width: 550px;margin-left: auto; margin-right: auto;">
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
</div>