In this gallery the last image should float to the left but it is positioned in the middle. Whats wrong with the code?
This is the whole code CSS.
This is the whole code HTML.
HTML:
<div class="text-block7" >
<img src="gal/thumb/60.png" alt="">
</div>
CSS:
#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}
Before the 7th div block add:
<div style="clear:left"></div>
this happens because your 4th image is higher, so the 7th image when is floating to the left is slamming against that element.
to prevent this kind of behaviour just define a css rule that applies a clear:left on every 3n + 1 div involved: e.g.
div[class^="text-block"]:nth-child(3n + 1) {
clear: left;
}
Note: the nth-child pseudoclass unfortunately doesn't work on IE8, but if you need to absolutely support that browser you may simply use display: inline-block and vertical-align: top instead of floating elements
Related
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
My chrome is the latest 31.0.1650.48 version.
Today I just notice that the float:left seems not working properly. (IE & FF are fine and Chrome used to be fine as well.)
Html is like:
<div class="listWrapper collapsed clearfix">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div class="ui-checkbox" role="checkbox" tabindex="0" style="display:inline-block;"></div>
</div>
Css is like:
.ui-checkbox {
background: url("../images/elements/form.png") no-repeat -183px -331px;
width: 37px;
height: 31px;
float: left;
}
What happened now is the inner checkbox div cannot float next to ul & li at very beginning. But if I right-click on that div --> Inspect Element --> Untick 'float: left' and then re-tick it on, it becomes correct.
Who has any idea about this?
ADD:
ul is float:left and each li actually has 1 background image and float:left as well. In that case, 3 (li) images show together in 1 line, and next div (checkbox shape) should display in the same line. But now div display to next line unless I untick & re-tick its float:left css.
ADD AGAIN
Please see the screen shots for 2 result:
The WHOLE div is float:right, and inner ul,li and div are float left. But the green "checkbox like" div at very beginning display under all these li. When I untick and re-tick float:left, it becomes OK.
Thanks!
Check whether you have given an explicit width to <ul>. And check whether your <ul> 's and the checkbox div 's widths' addition are less than or equal to the width of div listWrapper collapsed. If there is no width to the mother div then it is ok and try this
.ui-checkbox {
background-color:green;
width: 37px;
height: 31px;
float: left;
}
ul{
float: left;
width:50px;
}
Check this Fiddle
Or the update Fiddle.
Not sure why you're getting different results from different browsers, but you need to float the ul element as well to position the checkbox alongside it. Also, as someone mentioned in your post comments, you have an inline style changing the display property to inline-block, which obviously negates the float property.
Here's a codepen. I replaced the background image url with a color just to show the behavior.
.ui-checkbox {
background: url("../images/elements/form.png") no-repeat -183px -331px;
width: 37px;
height: 31px;
float: left;
display:inline-block
}
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I have a line of text that I'm wanting to position a small graphic next to, within a full screen liquid layout. I have it working, but I'm not sure why.
The html:
<div class="wrapper">
<div class="image_container">
<img src="some_valid_url">
</div>
<div class="text">Zachary</div>
</div>
The CSS (written in sass, if you're curious about the nesting):
.wrapper {
text-align: right;
float: left;
width: 10%;
word-wrap: breakword;
}
.image_container {
margin-left: 2px;
float: right;
img {
height: 20px;
width: 20px;
vertical-align: top;
}
}
.text {
overflow: hidden;
}
What this is supposed to do is place the small graphic and the text on a single line, and the graphic be just to the right of the text. And it works, but only if the image_container div is above the text div. Flip them around and the image now sits below the text. Why is that?
It has to do with div.text being a block level element and not interacting with the floated .image_container.
When .image_container is before div.text in the markup it floats to the right and then because div.text isn't cleared or floated, it essentially ignores .image_container and goes on the same vertical line.
However when .image_container is after div.text, which is taking up 100% of the available horizontal space (because it's block level), it respects this and floats to the right, just below it.
If you put borders around both your elements, it should become clear what's happening.
It isn't really the HTML that matters, but the CSS. CSS float's still treat elements like a blocks-- a floating block element. An element with a float will basically keep one foot on the ground, where its block position is, but the rest floats in the air. CSS floats don't act like position absolutes, which totally pops it out of its block position and makes it float.
I believe the issue is your text-align in the wrapper. Text-align will actually align elements within the div as well, so if your text is listed first, text and image are going to be pushed to the right. You could probably fix this by adding "float: left" to your text class.
i have made a custom solution, it work even you put image container below or up to text
<div class="wrapper clearfix">
<div class="image_container">
<img src="http://www.netbsd.org/images/download-icon-orange.png" />
</div>
<div class="text">Zachary</div>
</div>
.image_container,.text{
float:left;
line-height:40px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
you can see its working demo
let me know if something else is required.
I want to put two <div>s next to each other. The right <div> is about 200px; and the left <div> must fill up the rest of the screen width? How can I do this?
You can use flexbox to lay out your items:
#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
This is basically just scraping the surface of flexbox. Flexbox can do pretty amazing things.
For older browser support, you can use CSS float and a width properties to solve it.
#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>
I don't know if this is still a current issue or not but I just encountered the same problem and used the CSS display: inline-block; tag.
Wrapping these in a div so that they can be positioned appropriately.
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
Note that the use of the inline style attribute was only used for the succinctness of this example of course these used be moved to an external CSS file.
Unfortunately, this is not a trivial thing to solve for the general case. The easiest thing would be to add a css-style property "float: right;" to your 200px div, however, this would also cause your "main"-div to actually be full width and any text in there would float around the edge of the 200px-div, which often looks weird, depending on the content (pretty much in all cases except if it's a floating image).
EDIT:
As suggested by Dom, the wrapping problem could of course be solved with a margin. Silly me.
The method suggested by #roe and #MohitNanda work, but if the right div is set as float:right;, then it must come first in the HTML source. This breaks the left-to-right read order, which could be confusing if the page is displayed with styles turned off. If that's the case, it might be better to use a wrapper div and absolute positioning:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
Demonstrated:
left
right
Edit: Hmm, interesting. The preview window shows the correctly formatted divs, but the rendered post item does not. Sorry then, you'll have to try it for yourself.
I ran into this problem today. Based on the solutions above, this worked for me:
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
Simply make the parent div span the full width and float the divs contained within.
UPDATE
If you need to place elements in a row, you can use Flex Layout. Here you have another Flex tutorial. It's a great CSS tool and even though it is not 100% compatible, each day its support is getting better. This works as simple as:
HTML
<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>
CSS
.container {
display: flex;
width: 100%;
height: 200px;
}
.contentA {
flex: 1;
}
.contentB {
flex: 3;
}
And what you get here is a container with a total size of 4 units, that share the space with its children in a relation of 1/4 and 3/4.
I have done an example in CodePen that solves your problem. I hope it helps.
http://codepen.io/timbergus/pen/aOoQLR?editors=110
VERY OLD
Maybe this is just a nonsense, but have you tried with a table? It not use directly CSS for positioning the divs, but it works fine.
You can create a 1x2 table and put your divs inside, and then formatting the table with CSS to put them as you want:
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Note
If you want to avoid using the table, as said before, you can use float: left; and float: right;and in the following element, don't forget to add a clear: left;, clear: right; or clear: both; in order to have the position cleaned.
div1 {
float: right;
}
div2 {
float: left;
}
This will work OK as long as you set clear: both for the element that separates this two column block.
I ran into the same problem and Mohits version works. If you want to keep your left-right order in the html, just try this. In my case, the left div is adjusting the size, the right div stays at width 260px.
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
The trick is to use a right padding on the main box but use that space again by placing the right box again with margin-right.
I use a mixture of float and overflow-x:hidden. Minimal code, always works.
https://jsfiddle.net/9934sc4d/4/ - PLUS you don't need to clear your float!
.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}
As everyone has pointed out, you'll do this by setting a float:right; on the RHS content and a negative margin on the LHS.
However.. if you don't use a float: left; on the LHS (as Mohit does) then you'll get a stepping effect because the LHS div is still going to consume the margin'd space in layout.
However.. the LHS float will shrink-wrap the content, so you'll need to insert a defined width childnode if that's not acceptable, at which point you may as well have defined the width on the parent.
However.. as David points out you can change the read-order of the markup to avoid the LHS float requirement, but that's has readability and possibly accessibility issues.
However.. this problem can be solved with floats given some additional markup
(caveat: I don't approve of the .clearing div at that example, see here for details)
All things considered, I think most of us wish there was a non-greedy width:remaining in CSS3...
This won't be the answer for everyone, since it is not supported in IE7-, but you could use it and then use an alternate answer for IE7-. It is display: table, display: table-row and display: table-cell. Note that this is not using tables for layout, but styling divs so that things line up nicely with out all the hassle from above. Mine is an html5 app, so it works great.
This article shows an example: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
Here is what your stylesheet will look like:
.container {
display: table;
width:100%;
}
.left-column {
display: table-cell;
}
.right-column {
display: table-cell;
width: 200px;
}
To paraphrase one of my websites that does something similar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
just use a z-index and everything will sit nice. make sure to have positions marked as fixed or absolute. then nothing will move around like with a float tag.