I have block in my site and i want to do something like that:
http://s13.postimg.org/6ue9a8bfr/Untitled_3.png
but what happens to me is this:
http://s15.postimg.org/derz2m8h7/image.png
this is my div csS:
background-color: #ffffff;
width: 37.2%;
border-top: 4px solid black;
margin: 14px 0.4% 14px 0.4%;
float: left;
-webkit-border-radius: 2px;
border-radius: 2px;
How i can do this?
Thanks!
Old way:
Use a table with 1 row (tr) and 3 cells (td), put your DIVs in those cells, make sure the cells are valign=top.
People that shun table layout way:
Use 3 container DIVs that will represent your columns, relatively position them side by side (float:).
Modern way:
Use flexbox positioning https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes or use the CSS column-* properties http://playground.html5rocks.com/#columns
Use three separate container divs to represent the three columns. Within each column, which has been set the appropriate width, make the divs inside the containers and set them at 100% each, thus filling up the entire width of the column container forcing the other div elements underneath. Then add appropriate margins.
Related
I have begun trying to use bootstrap 5, and I am thoroughly lost. Below, is a layout I have created (i.e. the blue elements, the sidebar has been taken from this source) and I am trying to replicate the following layout.
I am basically trying to add a neat margin between the blue elements and and making L1, L2, L5 and L6 the same height, and L3 and L4 half of that height, and center the blue elements in the white space.
From a jsfiddle I have did, the css3 code I have added for the individual styling of the blue elements is as follows:
.col{
padding: 5rem;
background-color: #33b5e5;
border: 2px solid #fff456;
border-radius: 10px;
color: #fff;
}
To reduce the size of elements, I have tried reducing the padding but the elements are positioned more towards the top of the page. Adding any margin causes the elements to overflow onto new lines.
Any help would be appreciated to get it close to the desired result. Thank you
try to give margin to .col and remove p-5 from col-10
.col {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff456;
border-radius: 10px;
color: #fff;
margin: 0.2rem;
}
At a first look, don't use padding to play with the height of the elements, use height itself.
Also, don't apply css directly to the col class, it'll get harder to maintain. Use a different class name, and differentiate your cols based on them. Let's say L1, L2, L5 and L6 could be class big-card, and L3, L4 could be small-card. Apply a fixed height to these both. And remove all padding initially from the col.
.small-card {
height: 200px;
}
.big-card {
height: 400px;
}
Of course, adjust the height as per necessary. Then add padding according to the content that you put within the cards.
Then for the space between cards, use the gap class of bootstrap. Append this class along with row. Like: row gap-3 will add a space of 16px between each card. (Of course, you'll need to have the padding of the cards removed first as I said, otherwise the layout will break because the width of the cards will be more than you are allowing).
I would like to position 5 column blocks,each containing text in a row.I have tried to create a wrapper class which has a width of 1600px,a padding of 30px to the left and the right and two classes that will align content to the left and the right respectively,each of these classes are in nested divs within the wrapper class.I gave each div a width of 300px and a height of 300px,the first four divs align next to each other while the last one goes below and to the right.The CSS and HTML is here.
EDIT:
The major issue got fixed when:
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
But this seems to exceed the screen resolution needing me to scroll horizontally to view all the content,how do I deal with different screen resolutions?
try to give width:1600px;
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
http://jsfiddle.net/sKsZN/
Try using float:left and display:inline-block for all the column <div>. Also make sure that the total width of those column don't exceed to .wrapper's width.
You should use float:left for your .content-right class. http://jsfiddle.net/sDyC5/2/
Wrapper element css width property has set to wrong value. You must set the properly unit (px|%|em|ex). And also display: inline-block and float propeties should not use together.
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.
How do you horizontally distribute 3 divs with the least amount of code?
I have 3 divs that have the same class, and I need to distribute them horizontally, with 19 pixels of space between each div.
My solution currently is to give the first 2 divs a right margin of 19 pixels, and assign a separate class to the 3rd div that gives it a left margin of 19 pixels.
This gets the job done, but I feel like there may be a better way of doing it. Ideally, all 3 divs would still have the same class.
See: http://jsfiddle.net/thirtydot/q6Hj8/
.yourDivClass + .yourDivClass {
margin-left: 19px
}
That uses the adjacent sibling combinator to apply margin-left to every .yourDivClass which is preceded by a .yourDivClass - in other words, all except the first.
You only need two columns with a right margin; the third column needs no additional margin. Border added so you can see it in a fiddle.
div.hasMargin
{
margin-right: 19px;
}
div.column
{
border-color: black;
border-style: solid;
border-width: 1px;
float: left;
}
Here is a fiddle
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.