I have 2 columns, floated one to each side, and I'd like to use a 1px width line separator, that goes from top to bottom of the longest column.
Id rather stay away of TABLE layouts, and I dont know which one will be the longest column, or how long will it be.
How could I do this with just css?
http://jsfiddle.net/AhfXc/2/
Something like this
.colright{
float: right;
border-left: 1px solid gray;
left: -1px;
position:relative;
}
http://jsfiddle.net/AhfXc/18/
You could fake it by putting a parent div around both and giving the parent a background image which would be a 200px wide, 1px high image with the a 1px black/gray dot in the middle.
This is possible with CSS. Here's my version of your example: http://jsfiddle.net/AhfXc/15/
Basically, just make the separator be absolutely positioned within the parent container (make the parent position relative so this works). Then attach the child to the top and bottom with top: 0 and bottom: 0. You could set the separator background to be the colour you want, but I've used a border style since you could easily apply dashed/dotted style if you want to.
This does only works if the columns have a known absolute or relative width because the separator's horizontal position is not directly affected by them, but if this is the case, it's a fairly simple solution.
Related
I'm using react-photo-album to have a photo album on my website.
I was wondering if it was possible to have a CSS border wrap around the photos at the bottom, but following the sides to account for different heights?
What it is currently:
I was picturing something like this:
What I was able to get it to using :last-child on the react-photo-album--column class:
But any attempt that I did just resulted in a border around the entire container, and not the individual photos at the bottom.
I already style the other sides with:
.react-photo-album {
border-radius: 5px;
border: 4px solid #86afe1;
border-bottom: 0;
padding: 3rem 2rem 2rem;
}
and the container's HTML is available to view here my thought was to target the last child of each react-photo-album--column I just don't know how to do the sides then.
You could put borders around the side and bottom of the photo container divs. Then give these divs a background color that is the same of the overall background (blue), and overlapping these with the borders you want to hide. So basically:
Your container divs have 2rem padding
Each container has a higher z-index than the one to its left (to ensure overlap)
Each container has a blue background
Each container except for the first one has a margin-left of -2rem to move over the border of the container to its left
Edit:
Thinking this through a little more, this will only work when a container is shorter than the previous one. You could solve this by writing a function in javascript that checks whether a container is longer or shorter than the one before and after. Based on this, you could use or not use a border at each side (by means of extra classes applied to the containers).
Initially, I want to put words into this circle. Maximum character number is 20.
I want to set font size around 24px and the circle's width and height are 100px;
However, the 2nd word fell outside of the circle.
Can anyone help?
http://codepen.io/yumikohey/pen/ocFtJ
Here is my code.
<div class="blog_circle">
Channel Buzz
</div>
.blog_circle{
width:100px;
height: 100px;
border-radius:50px;
font-size:24px;
color:#000;
line-height:100px;
text-align:center;
background:#45C2B3;
margin-left: 50px;
margin-top: 50px;
}
On the other hand, how to make the font size change depends on user's inputs?
why do you have a line-height:100px? It is too high and that is what is causing it to fall outside the circle......
change it to say 40px........here is the demo
UPDATE:
add display:table-cell; to your style. This will center the text vertically in your div. when you actually inspect element and look at the div, the text is at the center of the div vertically. Updated FIDDLE
your circle is actually a square with width and height of 100px and its corners are trimmed by a distance of 50px giving the visual of a circle.
now you have your words with their font sizes but you also have line-height mentioned as 100px . Now this is like , imagine a page of ruled paper ( the one that has lines to write) line height defines the size between two lines. now in your case the line height is 100px which is the height of your entire box. If you lower the line height to say 50px (which will give you 2 lines to write on inside that 100px height box) it should work.
hope this helps
Try using padding and changing line-height and a few other things. DEMO
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
I'm trying to align a list of div blocks by 2 columns that have varying heights by floating them to each other. If every block's size is fix, they will naturally stack with one another neatly, however because this one involves varying heights, for blocks that are taller, the adjacent block will have alot of blank space below, before going on with the next block.
However, I noticed that this only happens to one side, if the blocks are floated left, then the right columns blocks will automatically fill up any blank spaces, and vice versa.
However I am now trying to seek a solution for achieving the fluidity for both sides.
You can see an example of what I mean here.
Everything on the 2nd column is nicely fitted, but on the left side, there is a lot of blank spaces for taller sizes.
CSS is like this:
.container {
width: 600px;
}
.item {
width: 250px;
height: auto;
background: darkgray;
border: 1px solid black;
float: left;
margin: 5px 0 0 5px;
padding: 5px;
}
You have 3 options all which have it's drawbacks.
Write a JavaScript solution that
will calculate each items starting
position and then reposition each
one accordingly using relative
positioning.
Change your markup so that there are
two container columns that are
opposing floats. You'll have to
distribute the items between the two
programmatically.
Use a table so that each item's
height matches the one next to it.
Obviously the last two aren't very semantically sound and the first one could be impractical depending on how large the list of items could become. I believe there is a way to do it in CSS 3 but it lacks browser support at the moment.