I would like to give defined horizontal gap between three containers. A Gap right and left of the middle container to keep the sections full width. No padding.
Live-view: http://live.bernhard-schrammek.de/#projects
Thank you for help and regards from Berlin
Tibor
You can add a margin right to each element and cancel it on the last:
.item {
margin-right: 15px;
}
.item:last-child {
margin-right: 0;
}
Or you can just add it to all except the last:
.item:nth-last-child(n+2) {
margin-right: 15px;
}
Pertinent to the description, you may use margin-left or margin-right CSS properties, for example, margin-left:10px; (absolute) or margin-left:1%; (relative).
Related
I'm trying to style my headings with display:inline-block; but i've a problem with a behavior of the property.
Jsfiddle : http://jsfiddle.net/Tu2GU/
See the titles, when a title has a long text, the heading goes under the floated div. I want the heading to break and then display 2 lines (or more) and stay on the left of the floated div, not under it.
Can't find anything helping, thanks !
edit : i updated the jsfiddle : http://jsfiddle.net/Tu2GU/13/ (removed % width for the floated div)
I don't want to have 2 divs side by side, the floated div on the right is meant to be right there, like a page summary giving link inside the page.
Also, heading are under the floated div (in html code) not over.
Since the right list uses a percent width, you can set a max-width with a percent width
h2 {
... Your original CSS ...
max-width:calc(75% - 40px); /* 40px comes from horizontal padding */
}
Demo
I'd recommend using a class to apply to each header instead of using the same max-width on each h1, h2, etc, but that's just personal preference
If the width of the right floated div is set, use calc(100% - 440px) or whatever the left horizontal padding + right width is
Create a float: left; container using the CSS below:
.lfloat {
float: left;
width: 75%;
}
You just have to wrap your text in a new div:
<div class="lfloat">
<!-- content -->
</div>
Demo
This will contain the content to the left and keep your sidebar to the right.
Note: You must clear your floats with clear: both;.
Why not try floating the elements on the left instead of using inline-block?
* {
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1em;
}
.rfloat {
float: right;
width: 25%;
background: #9C3;
color: #111;
}
h1 {
float: left;
margin: 0;
padding: 10px 5%;
background: #06C;
color: #FFF;
}
h2 {
float: left;
margin: 0;
padding: 10px 5%;
background: #F33;
color: #FFF;
width:65%;
}
http://jsfiddle.net/g4Grv/
updated your Jsfiddle: http://jsfiddle.net/Tu2GU/12/
Main thing was a wrapping div around your h1 and p tag alongside of display:inline-block and vertical-align:top
Is this what you needed?
You have a few options. You can float the heading to the left so that it will slide up - you will have to set a width, though.
h2 {
float: left;
width: 80%;
}
Another option would be to set a max width. Since inline-block elements are technically block level, you can supply a width without breaking anything. You could try this:
h2 {
max-width: 80%
}
Yet another option would be to make the element inline. This will let the browser determine the best fit for the header.
h2 {
display: inline;
}
This will make the header wrap around the list and you may get the results you want. This method will make height and width parameters not work, so you will have to substitute those for line-height and padding
I'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:
.contents {
...
margin: 10px 10px 10px 10px;
}
Example: http://jsfiddle.net/LCTeU/
How do I fix this?
Edit:
I've also tried padding the container instead, and that just expands the container to maximum size (why?):
.container {
...
padding: 10px 10px 10px 10px;
}
Use overflow:auto on any of the elements that are involved with the collapse. For example:
article {
overflow:auto;
}
jsFiddle example
This answer is based off of the fiddle you provided.
I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:
article {
//display: block;
clear: both;
padding: 10px;
}
This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.
.rounded-box {
background-color: #959392;
border-radius: 15px;
margin: 10px 0px;
}
Working Example http://jsfiddle.net/LCTeU/4/
So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.
I found a fix that does not require a padding, and does not require changing the overflow of the container element:
article:after {
content: "";
display: block;
overflow: auto;
}
The idea being that we add another element at the bottom that disrupts the collapsing margin, without affecting the height or padding.
As per the fix that Erik Rothoff suggested, which does not seem to work in Safari, first I tried the following:
article:after {
content: "";
display: inline-block;
overflow: auto;
}
This does work in Safari but takes up space which I could not get rid off, messing up the grid so much that I would need to change margins.
Then I decided to combine the two by doing the following:
article:after {
content: "";
display: block;
padding-top: 1px;
margin-top: -1px;
}
This works in Safari, has an acceptable height of 1px which is negated by the negative margin top.
Im having trouble lining up the thumbnails (4 blocks). The last block broke to the second line. Is it the width of the container inside div? If I minimize the browser smaller, the blocks are lined up just fine, but no gaps between them. http://magnixsolutions.com/dev/test/test.html.
Also why is the cursor centered in the textfields?
To position the cursor to the left in the textfields, you can use this:
.fname, .lname, .zipcode
{
text-align: left;
}
Yes, it is. Your thumbnails container is shorter than your thumbnail sum their lengths together with their gaps.
Try something like this:
.thumbnails {
margin-left: -15px;
...
}
.thumbnails li {
margin-left: 15px;
...
}
.thumbnail {
width: 220px;
...
}
This is the modification to your bootstrap css file. So if it does not take any effect, apply !important to enforce them.
UPDATE:
you forgot to apply:
.thumbnails > li {
margin-left: 15px !important
}
On my site, near the bottom there is a "FREE ACCESS" section. Ideally, I'd like to have the freedom image on the left, the signup form in the middle, and the success image on the right. The width of the 3 elements is right at 840px total in a 960px container, so I don't think that's an issue. For this, I'm using:
.signup {
border-top: 1px solid #333333;
float:left;
padding-bottom: 40px;
padding-top: 40px;
overflow: auto;
width: 280px;
}
.signup p {
padding-bottom: 20px;
}
.signup p span {
font-family: nevis-webfont;
font-size: 112.5%;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
.signup #mc-embedded-subscribe {
background: #0fddaf;
}
.signup .freedom {
float: left;
width: 280px;
}
.signup .success {
float: right;
width: 280px;
}
.clear {
clear:both;
}
And the HTML.
As you can see, something isn't working quite right and I've been looking at this for so long I'm afraid I'm missing something simple. Any ideas on what the issue might be?
Quick and dirty:
Take the width from .signup, float .form left, and give it 280px width;
or take the width from .signup, and give .form an extra class .freedom. (<div class=' freedom form'> - quite rebellious, eh?)
Ta-da!!
Advice
Learn CSS before you work with it, it will save you time and headaches in the future;
???
Profit.
Give a width to the element you are floating, then it should behave predictably.
Float .freedom, .form, and .success all left. Then, remove the width from .signup.
Seeing as you've got an absolute size for each of the divisions, you should be able to get what you want by floating them all to the left and giving them the sizes you want to get them where you want them to be.
You'll also need to add overflow:auto to the .signup container div so your floated content stays within it.
You want freedom image on left, sign up in the middle and success image on right. s???
To get this first float the freedom image and sing up on the left by taking the width apparently. then float the success image on right.
In the above css please remove the clear: both; and clear all floats at the end of the all floats by using the another div like
div.clear{clear:both}
I'm trying to build the liquid layout shown below in CSS.
The left column should stretch to all available space, and if it's possible, on same line.The column on right should became with the same width.
I have already achieved a result very close to what I want. Take a look at http://jsfiddle.net/tcWCC/34/embedded/result/
But there are two problems. The height of both aligned DIVs should be equal. The first or second DIV should grow to be the same height as the other.
The second question is that when the width is not sufficient for 2 DIVs, I want the first (NomeEvento) div to be on top. and not the second div (DataEvento).
I am not sure I understood your question correctly. Is the following layout something similar to what you want? http://jsfiddle.net/5sjgf/
Here's more CSS to try out. If you wanted a margin on that left side. I added background colors to help differentiate.
div.NomeEvento {
text-align: left;
float: left;
width: 75%;
background-color: #eee;
}
div.DataEvento {
text-align: left;
margin-left: 5%;
width: 20%;
float:left;
background-color: #ccc;
}
It seems like a lot of extraneous CSS to me. But maybe the other stuff is in there for a reason. This works fine as the sum-total of your CSS though:
div.Evento {
overflow: hidden;
margin-top: 10px;
}
div.NomeEvento {
background: #eee;
padding-right: 20%; /* the same as the right column width */
}
div.DataEvento {
float:right;
background: #ddd;
}
...BUT, if you're right-floating an element, place it first in the layout - here it's element class DataEvento:
<div class="Evento">
<div class="DataEvento">#evento.Data</div>
<div class="NomeEvento">#evento.Nome</div>
</div>
Check it: http://jsfiddle.net/J89Hp/
Cheers
I acomplished what I want using display table, table row and table cell in my divs.
Take a look. It's exactily what I want.
http://jsfiddle.net/tcWCC/47/embedded/result/