Html div float border

How can I add borders between floating elements depending on where the floating lands?

I have products on a website with borders between them, but no borders at the top, bottom, left and right. It’s something like this:

a | b | c | d -------------- e | f | g | h -------------- j | k | l | m 

where | and — are borders The letters from a to m are product images and texts inside

You can use class like «no-border-top» or / and «no-border-left» for exemple and add class on your html

This may be achievable with CSS Grid, using the grid-gap of 1px (as thick as your border should be), and then changing the container’s background coor (the color of what your border would be). I will try to make a codepen in the answer below in one moment.

If you always have 4 columns you can use nth-child(4n) to target every fourth element. And you can do something similar for the other edges.

3 Answers 3

Please take a look at my codepen and see if it helps. Codepen Example

display: grid; grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-gap: 1px; 

I am using CSS Grid to define the table of «products». This is a very flexible approach, basically there is no border, however the background-color of the container which is underneath each cell is peeking through the grid-gaps. The top, right, bottom , left outer edges do not have a gray border. This can be manipulated with margin or padding on the container/cells.

Depending on the actual implementation on your product site, you may have this nested in another container. Feel free to comment and I can try to clarify.

Here is a link to caniuse for cross browser support info caniuse: CSS Grid Layout

And ofcourse the official Mozilla Developer Network Doc on «grid» MDN CSS grid

Источник

css float and border problem

demo But the div post-user is going outside the border.

How can i fix it ? (P.S. : Its something similar to layout of forums)

Both Andrew’s and Ben’s answers will work and both have their drawbacks. Neither is the win-all solution so make an educated decision here as to what path you want to take.

@benjamin ah its not that easy u have to wait a certain amount of time. I wasnt able to accept at that time.

3 Answers 3

http://jsfiddle.net/PGFTz/5/ I added a clear fix after post-user which allows it to stay within the box.

add overflow:hidden to your .main-box css

extensive explenation about how and why it works can be found here

A great guide for the working of float can be found here:

Sorry this answer works perfectly fine but i cant get scorllers if i want. So ill use clear. Thanks ill do +1 😀

You could change float:left to text-align:left

yes this works quite fine indeed :> sharp. I am so used to having most elements floating that I suggested the overflow:hidden fixed by default, but in this instance only the post-user is floating

@Benjamin: Ha, thanks man. I try to use text-align when I can just because it’s a bit easier (for me) to understand. I start to get confused when too many things are float ing haha.

Text is however aligned left by default, so not replacing the float but simply removing it, would also solve the issue. But the post-user will take the entire width instead of only the width it needs to hold the text

Good point! I end up using text-align:left alot because the sites I’ve inherited all have a built-in text-align:center that I can’t change. So, I often end up thinking center is default haha. +1 on your answer.

Источник

In this 2-column layout, I want to put a border over the whole page. I thought if I put ‘border:solid’ inside the tag would do the work, but it didn’t. It only put a border over the heading . Could somebody help? Thanks! http://jsfiddle.net/v5gSt/

While not semantic, adding an empty div before the closing body tag with the style clear:both fixes it.

Actually your border: solid; works 🙂 but the two div are set to float: left so there are remove of the document flow, you have to use the clear CSS property on a element after the last div.

The very basic example which is far from perfect but works :

There a lot of solution out there for create a clearer you can view some of them on Quirksmode

put this line before body’s end tag

• 1817: Draisienne
• 1865: Velocipede
• 1870: High-wheel bicycle
• 1876: High-wheel safety
• 1885: Hard-tired safety
• 1888: Pneumatic safety

Floated elements are taken out of the document flow, and as a result their containers don’t know anything about their width or height unless they are floated.

Think of it as if they are 2D and were literally floating on top of the container.

You have two main options to get round this:

What a bad solution! The right hint would have been to clear the float. Either by pseudo element clearfix or with an additional element our by applying overflow on the body!

With the way different browsers react to overflow I have found it to be unreliable. As for the clearfix using a pseudoelement, that’s a nice idea. I hadn’t thought of that.

Can you provide an example of how it’s unreliable? I have used it quite a lot and never saw a problem.

Most often in older browsers I’ve had instances where using overflow: auto would result in scrollbars which weren’t needed.

Источник

Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)

I’m teaching myself CSS and HTML, and I’ve come across something that seems like a bug— it’s challenging how I understand HTML and CSS. I’ve found a fix for this bug already, but I was hoping someone could cue me as to why the fix works, and if there’s some advice out there for how to get a easier handle on CSS’s inconsistencies. Below I’ve detailed the problem and its solution. Problem: I have a few items that I want to be nested in a couple of boxes on the page. I’ve changed the CSS to draw attention the specific problem areas: The red and green boxes should be sandwiched between the black and yellow lines. The red and green boxes are set to float to the right and left of the page. Their container does not expand to surround them, and the black and yellow lines touch eachother. After applying the magical CSS before my custom CSS, the two lines surround the red/green boxes as expected Here are my files: template.html

    -->   
 
Name
 
Home Address
 
 
Phone Number:5555
 
 
 This text should be under everything else.
   

header#contact < display: block; font-size: 1em; border-bottom: 5px #ff0 dashed; >header#contact #name < display:block; text-align: right; font-size: 2em; border-bottom: 3px #000 solid; >header#contact #address < float:left; background: #f00; >header#contact #contact-details

/* our Global CSS file */article:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >aside:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >div:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >footer:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >form:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >header:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >nav:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >section:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >ul:after < clear:both; content:"."; display:block; height:0; visibility:hidden; >/* our ie CSS file */article < zoom:1; >aside < zoom:1; >div < zoom:1; >footer < zoom:1; >form < zoom:1; >header < zoom:1; >nav < zoom:1; >section < zoom:1; >ul

Источник

How to give border to any element using css without adding border-width to the whole width of element?

How to give border to any element using css without adding border-width to the whole width of element? Like in Photoshop we can give stroke- Inside , center and outside I think default css border properties is center like center in photoshop, am i right? I want to give border inside the box not outside. and don’t want to include border width in box width.

12 Answers 12

This won’t add the extra width and height.

Just a note that won’t follow the curves of any border-radius you might have on the element, so you’ll end up with a square border.

The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.

• -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
• -moz-box-sizing: border-box; /* Firefox, other Gecko */
• box-sizing: border-box; /* Opera/IE 8+ */

I’d suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

This is the best answer, though I don’t think you really need all the prefixes. caniuse.com/#feat=css3-boxsizing

Источник