This problem is a little weird (as I need to do this way, since I din't find any another good way).
I have three divs inside a "big div".
The main div is called:
<div class="produtos-item">
And inside this div I have three another divs
<div class="item">
So what I need?
Imagine a store (e-commerce). I have 3 products (item).
PRODUCT-1 PRODUCT-2 PRODUCT-3
------------------------------
THIS LINE
PRODUCT-4 PRODUCT-5 PRODUCT-6
I need to insert a line between the divs. BUT if I set the div .item with no height will break the layout. See the screenshot.
As you can see, this black circle was the product. But since there is no fixed height and I can't set this (because the title can be bigger), it will break the layout. If I can "call" the main div (produtos-item), I can fix this thing.
Do you know any solution? :(
JSFiddle: http://jsfiddle.net/WRGba/ [edited May, 10]
Try putting display:inline-block; on them (zoom:1;*display:inline; for IE6, IE7 compatibility)
Also, a jsFiddle couldn't hurt!
Using #Shebo's example from above:
Not working example: jsFiddle
Working example: jsFiddle
Related
The problem is (which you can see in the pictures below) that the "doner", "Wallet", and "Amount" aren't centered on the page.
I've tried changing the margin and padding and moving divs around and etc, but nothing seems to be working and I don't understand what is wrong or how to fix it. (it is hard to see in the code snippet because it's not full screen so I'm just going to give a link to the HTML here)
The only issue I can find is when I inspect element on google chrome. When I hover my mouse over <div class="container"> (the one underneath div class="learn-more">) It shows that the div container is wider on the right side, but I can't find why!
Thanks for the help! If you need any clarification please ask, I couldn't find anything to fix my problem online so I came here.
Here's a picture of what I mean as well:
The essential problem with your code is the markup. You're using the Bootstrap & putting some div directly inside the container & then another container inside this div. See what I mean:
Here are the first three rules from the 3rd Bootstrap documentation you should follow when building your HTML:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be
immediate children of rows.
So, my suggestion is to revise your HTML layout and use the Bootstrap as it intended instead of applying some hacks.
Start from rearranging containers in the way that the content would be put inside columns and all of the wrappers would be outside of the containers or inside the columns.
put your content that you want to center in a div like
<div class="box">your content...</div>
in your css file just add this :
.box{
display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);
}
you can also use a float left for your 3 titles and set the same witdh and height for the three with text-center proprety
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
I've looked through other posts regarding CSS floats, but have not yet found an answer.
I have several div with same width (1/3 of screen). They are all set to float left. When one is longer than the others, it pushes the following blocks down.
I've made an example which you can see at http://apsam.dk/misc/float-pushdown-problem/index.php (the yellow div is pushed down by the blue div).
If I missed the answer in a post, please point me to it. I've looked throug alot.
EDIT to clarify. The question is: How to avoid that the yellow div gets pushed down.
To start a new line, please enter a div with the clear: both; attribute.
See my answer on another post here, which shows an example:
Link
Floats don't "jigsaw puzzle" together like that. Each of your floats has a height, that height is seen and honored. You can't get .yellow to ignore the height of .blue, especially in the same container. You could use positioning to move .yellow up.
Demo here
Or, you could use another div and treat it as your left column and have it contain the green and yellow divs.
Demo here
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
Been customising a store and having a bit of a problem. Think its with CSS but can't work it out. Theres a gab between the sort select box and the search results, there's no padding, or margin, using the same layout for the category display same code no problems.
http://www.amazing-web-design.co.uk/staging/devilish/index.php?route=product/search&keyword=ipod
Can you have a look in case i have missed something all help appreciated :)
Thanks
Joe
The reason you have the gap between the sort select box and search results is beacuse you are floating elements and in order to clear them, you are using the "extra mark-up" method. This causes the gap. In your particular situation, do the following.
<div class="sort">
<div class="clear"></div>
First delete the div.clear. This will remove the gap. However this will also cause the below div to get effected and ovrelap because you are floating as follows.
div.sort {float: right;}
Now clear the float as follows.
div#dkProductList {clear: right;}
Now you will see that the div id="dkProductList" is exactly below the div class="sort" and the gap is gone. If you want some gap between the two, just add some margin, for example:
div#dkProductList {margin-top: 10px;}
This completely solves your problem. There are other ways also, for example instead of using extra markup such as you have used div class="clear" that you have used to "nullfie" the effects of float, you could use the "overflow" property with a value of "auto". In this way there will be no need for the extra markup.
Tested in IE9, FF4.01, GG11, AF5.0.5 and Opera 11.