Everything I've tried on my own so far has ended in complete failure.
EXAMPLE: http://broadleafdesign.ca/index-broken-on-purpose-.html
This looks perfectly fine, centered perfectly on my monitor at fullscreen in Chrome. Any other monitor, or size of the browser window, off centers the paragraphs.
How do I go about making these paragraphs resemble this picture, the arrows representing whitespace?
Note: I'd like the containers/divs to be centered, though the picture I made doesn't represent that very well:
Here is some basic CSS from an example that I put up for you on jsfiddle http://jsfiddle.net/Pm56t/
A basic way to achieve this layout would be to declare the widths of the 3 elements as 33.333%, then add float:left. Pad to taste..
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.container {
width:100%;
}
.box {
float:left;
width:33.333%;
padding:20px;
}
Defining the margins and div elements as percentages might also work.
Related
Here is my fiddle:
https://jsfiddle.net/2msz53n9/
And here is the problem:
* {
margin:0;
padding:0;
overflow:hidden
}
I need to use this for the rest of my site. So I cannot remove it. However, on my fiddle, I want the border to show also on the right, but now because of the above, it doesn't. I would like to have a solution where I can keep the above code, however, if not, I will have to review my whole site and re-do the CSS, I guess. I haven't been able to get the border on the right without removing that wildcard code though. Anyone?
You can add box-sizing:border-box; to your list of wildcard rules:
* {
margin:0;
padding:0;
overflow:hidden;
box-sizing:border-box;
}
jsFiddle example
Bootstrap actually does this and you can read more here.
The actual width of .rightcont is 328px including 1px border on left and right.
So either increase width of .right to 328
Or add box-sizing: border-box; to .rightcont
I am working on a page with horizontal scrolling and multiple columns. The first column of the text should be centered on the page and the other columns should be visible, too. Here is a sketch, which demonstrates what I have right now – an article with columns which is scrollable: jsfiddle. I would like to see the overflow text, too. I know overflow-y:visible and overflow-y:scroll cannot be combined, but how can achive something similar?
Only the text (article) should be scrollable, not the whole page.
Here are some images which illustrate what I would like to do:
Not too sure of what you are looking for, but here is a hint with display and text-indent:
DEMO
CSS to demonstrate idea :
.article-wrapper {
border:solid;
width:600px;
margin:auto;
text-indent:0;
transition:1s
}
.article-wrapper:hover {
text-indent:-500px;;
}
article {
text-indent:0;
display:inline-block;
height:400px;
width:500px;
column-width:500px;
}
If this effect wanted, you may look for a way via transition, animation or javaScript to take control over it.
I am designing a website with two floating columns which I want to fill the whole screen.
#column_main{
position:relative;
background:#ffffff;
float:left;
width:70%;
height:auto;
min-height:550px;
}
#column_side{
position:relative;
background:#dbdada;
float:left;
width:30%;
height:auto;
min-height:550px;
}
if I had the line below to #column_main
border-left:solid 1px #c0c1c4;
The float messes up and they are no longer side by side.
In IE I have been able to fix the problem by setting the #column_main width to auto and it fills the rest of the page. This doesn't work in firefox and I have tried reducing the percentage slightly but that leaves a gap between the #column_main and the right edge of the page. Is there a way to have the 1px border on the left and make the float fill the remainder of the screen.
The float no longer works because of the box model where the border is added to the width instead of included in the width, you have already used up 100% of the width by doing width:70% and width: 30%.
If you plan on applying a border you might want to apply it to a child element inside one of the wrapping floated columns and use those parent columns only as a grid system to structure your other content.
Alternatively try bootstrap grids
add box-sizing: border-box; to #column_main
This property basically says you want the box size to apply to the border and everything inside it.
This blog post explains this, and some other options to fix this particular problem.
Is it possible to have 3 columns, all equal in width with 2 columns in between, all be fluid? Everything I can find shows one column fixed, or they have different width. I need them all to be the same. No matter what I do on this page, the last li doesn't come all the way to the edge of the container. If I enlarge the % of the li then it doesn't fit in smaller resolutions. Thanks!
Page example is here
CSS is here
It looks like you already got an answer on how to get it working, but you'll quickly run into another problem if you're going to have any sort of margin or border on these columns.
Those width percentages? They don't include border/margin - so if you add either of those, you'll once again have columns overflow.
Solution? Make sure to set box-sizing: border-box; - if you haven't heard of it before, Google it. It's magical!
your question puzzles me a bit. On the one hand, this example shows what you sound like you're asking for:
http://jsfiddle.net/JuamW/
On the other hand, the actual example of your site shows a fixed-width situation where your columns have no requirement to be fluid. If the above example doesn't give you what you need, could you provide some more context?
I would say it's all about calculating the right percentages.
To start fresh, remove the borders and margins on all three columns. Then make their widths 33.3333% so they will all fit perfectly inside their container.
Looking at your CSS I can see you have a margin (left and right) of 3.75% on the middle column, so you must re-calculate your column widths to 100 - (3.75 * 2) / 3 = 30.833333%.
Secondly, switch your border to an outline to prevent unnecessary width being added to your layout.
Lastly make your imgs 100% width so they fit inside their containers nicely.
Should be done after that, I used Firebug to perform all those changes on your site and it looks like it worked out.
If you want to bring the last li out add:
#categories-wrapper ul li.students{
float: right;
}
#categories-wrapper ul li.fine-art{
float:left;
}
replace categories-wrapper ul li:nth-child(2) with:
#categories-wrapper ul li.gd {
margin-left: 4.25%; /* 36px / 960px */
float: left;
}
And modify this:
#categories-wrapper ul li {
width: 30.20833%; /* 290 / 960 */
border: 1px solid #333;
position: relative;
}
Is that what you're looking for?
Im trying to align multiple Images or DIVs.
i get the content from wordpress.
#wrapper{
width:800px;
}
.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}
This causes the last image to go to the next line.
i found
#wrapper div:first-child{
margin-left:0px;
}
helps me with the first line but the next lines are "broken" again.
how can i align 6 images in a row with ^n Pictures?
That's indeed a common design problem. I used to fix it by adding 10px to the container, but nowadays I always use a jQuery fix:
$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');
See jsfiddle here
Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)
.image:nth-child(6n+1) {
margin-left:0px;
}
See jsfiddle here
Sounds like the total width of the images, padding and margin are too wide for your container width. Try increasing the container width to confirm this.