I have DIVs which comes side by side of each other & but there only fourth DIV comes in the first row & other are shifted too the next row.
I want each row first div take no space from left side but is not happened. Here is my code
http://jsfiddle.net/25pwG/
I know i can do it with giving class manual to the new row DIV but i didn't want that. i want this with less css & i didn't want to change my markup
NOTE: i want capability till IE8.
Thanks in advance :)
UPDATED:
http://jsfiddle.net/25pwG/8/
First the .parent div is a common class which is used in other section also & second thing according to the design the parent DIVs touch the row last div so, there is no space from the right side.
Suggestion A:
Add margin-left:-16px to parent
Demo: http://jsfiddle.net/25pwG/1/
Suggestion B:
Use margin-right: 16px on the inner divs, instead of margin-left
Demo: http://jsfiddle.net/25pwG/4/
Suggestion C:
If the parent div width is fixed, you can remove margin on every 4th child like this:
.feature:nth-child(4n){
margin-right:0px;
}
Demo: http://jsfiddle.net/25pwG/15/
Suggestion d:
Wrap your inner divs in a wrapper, and set this to be wider that the parent div
Demo: http://jsfiddle.net/25pwG/17/
Avoid using negative margin and padding. In feature class use margin-right:16px and remove .feature + .feature class.
so your css will be
.parent{
width:480px;
}
.feature{
width:100px;
height:100px;
background:red;
display:inline-block;
margin-bottom:10px;
margin-right:16px;
}
See this http://jsfiddle.net/25pwG/7/
.parent{
width:480px;
text-align: center;
}
.feature{
width:100px;
height:100px;
background:red;
display:inline-block;
margin:0 6px 10px;
}
I suggest trying this one. Using a negative value might cause some problems later on. So as much as possible avoid using it.
It's quite simple, just change from
.feature + .feature { margin-left:16px; } /*Remove this*/
to
.feature { margin-right:16px; }
Related
I made a small form that has potential to take credit-card details, as part of the Daily UI challenges (#002). I haven't implemented any functionality, just design.
Here is the form I made: http://codepen.io/alanbuchanan/pen/vGZPBp
My questions are regarding the two half-width sections of the form - Expiry Date and CC Number.
Here is the relevant code - this targets the two divs that wrap the two form elements:
div {
display: inline-block;
box-sizing: border-box;
width: 45%;
}
I wrapped these two sections in their own divs so that I could have more control over their positioning. Is it possible to position these at half-width without these wrapper divs?
In the example they are taking up 45% width because at 50%, the second div overflows onto the next line.
I just want to give it 50% and have it take up half the space as it should. Or should it not?
Even at 45% width, you can see there is about 1px difference between the height of these two divs.
After inspecting with Chrome Dev Tools, I can't find the problem behind this.
Any answers to my questions or different approaches to the situation will be very useful.
In most cases a setup as the following code, could be a best practice when aiming for creation of inline-block columns.
.column-container {
font-size:0;
line-height:0;
}
.column-container .column {
display:inline-block;
vertical-align:top;
width:50%;
font-size:16px;
line-height:120%;
}
You might wonder, why does the container have zero font-size and line-height?
This is often used because some HTML code cotains indented code, like so:
<div class="column-container">
<div class="column">text</div>
As of this example, you can see that the container div contains spaces/tabs before the column div is programmed. These spaces/tabs are rendered as characters and so they will obey to whatever the css is telling the characters to do in that container div.
You can use flexbox.
Create a outer div having id as flexdiv which will contain both the div of expiry and CC number.
Then write following code:
#flexdiv
{
display: flex;
justify-content: space-between;
div{
display:inline-block;
box-sizing: border-box;
width:49%;
}
}
Codepen Example
Here is the guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pen: http://codepen.io/anon/pen/jqwJMg
Comments: just add font-size:0 to the form.
These are the changes I made:
.minicontainer {
width:50%;
}
form {
font-size:0;
}
When you add two element inline(50%-50%) you should make sure that the font-size is zero
I'm attempting to use the CSS :before property to append a word in front of a regular paragraph. I want the remainder of the paragraph to be justified left, so that there is a margin underneath the appended word.
In order to achieve this effect, I've needed to set the height of the :before to an arbitrary height. But, if I don't know how much text will be in the actual paragraph, I have no idea what height I need to in the declaration.
.prereq:before {
content:"Prerequisite: ";
font-weight:700;
display:block;
float:left;
padding-right:30px;
height:70px;
}
The attached jFiddle might help better explain what I am trying to do.
http://jsfiddle.net/fgpj8w74/7/
Thanks for your help.
Check this Updated Fiddle
You can work with table-cell's so you wont concern about float or height, since they will fit each other automatically.
Just make your .prereq element a display: table, and the pseudo one a display: table-cell:
.prereq {
display: table;
}
.prereq:before {
content:"Prerequisite: ";
font-weight:700;
display:table-cell;
padding-right:30px;
}
I'm trying to make a responsive version of the "Holy Grail" CSS layout by Matthew James Taylor
So that the Mobile page should render like this:
left
content
right
I tried changing the float rules as in this fiddle, but I couldn't make it work. Try to change viewport size around 600 px.
Is there a way to do this without JavaScript ?
Thanks for any help !
You could make the divs relative and change the margin-top so that it's in the right order.
This is pretty hackish, but it at least gets them in the right order. It only really works if you know what height column 1 will be.
.holygrail .col1
{
margin:0;
position:static;
width:100%;
margin-top: 3ex;
}
.holygrail .col3
{
left:0;
width:100%;
margin:0;
float:none;
}
.holygrail .col2
{
width:100%;
top:0;
margin:0;
right:0;
position:absolute;
}
(This goes inside the media query.)
I looked into this some more, and found another Stack Overflow question where the answers have some good discussion about what you're trying to do. (Basically, this isn't something that CSS can do reliably.) The answers also include some hacks that are better than the one I proposed earlier.
You can use direction to achieve this
The direction property in CSS sets the direction of of content flow
within a block-level element. This applies to text, inline, and
inline-block elements. It also sets the default alignment of text and
the direction that table cells flow within a table row.
CSS:
.main-content {
direction: rtl; /* Right to Left */
}
The valid values are:
ltr - Left to Right, the default rtl - Right to Left inherit -
inherits its value from the parent element
source: http://css-tricks.com/almanac/properties/d/direction/
I have 3divs left, center, right
The problem is that left need to be 320px, right 150px and center will take the rest of the space.
How can i do this? It need to be 100% response. I dont know how big the screen is, it can vary from 1920 to 1600screen resolution, but left and right need to be fixed.
The examples that has been posted in the comments works, but if you want to make 2 column if the width is max 768 and hide the 3d div with display: none; it will not work with the table example. And the other one with css3 box doesnt either work because it doesnt work in Explorer, there is no pollyfill.
So is there any fix for this or do i need to do it the classic way and compensate with margins and padding etc.......
You can display:table property for this. write like this.
.parent{
display:table;
width:100%;
}
.parent > div{
display:table-cell;
min-height:200px;
}
.left{
width:320px;
background:green;
}
.center{
background:red;
}
.right{
width:150px;
background:yellow;
}
Check this http://jsfiddle.net/BNQfC/1/
OR
You can use CSS3 flex-box property.
Check this http://jsfiddle.net/sjYNy/1/
I'm trying to use both fixed-width and stretchy CSS content, similar to what is seen on Google Calendar. I assumed this would be easily achievable using min-width and max-width, however I am having trouble with sub-elements which are simply sticking to their minimum widths rather than stretching to the maximum.
A demo can be seen here.
You actually don't need setting min/max width anyway.
http://jsfiddle.net/UyZ6T/1/
The problem was basically the float: left; on the stretch-1. You only need that on the fixed size part. It basically means: 'I am on the left now, and everything else takes the space to the right'. A div with float property tries to take as little space as possible, so that the rest can stretch.
remove float:left from #stretch-1. fiddle
Your're essentially trying to create a fluid layout that contains fixed width elements, you need to set percentage widths on all of parent elements in order toget this to work like google calendar - change your css to the following
#container {
max-width:1280px;
min-width:260px;
width:90%;
height:200px;
margin:auto;
background:#000;
}
#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}
#stretch-1 {
min-width:60px;
width:20%;
height:200px;
float:left;
background:#c44d58;
}
#sub-content {
width:100%;
height:20px;
background:#4788ef;
}