I have four columns in a row, however, when I add content to the columns, each following column is pushed down on the page. I'm unsure how I can go about fixing this.
You can get a better understanding of my problem here, I've increased box size, and reduced it to two boxes, instead of four. http://jsfiddle.net/x5zDj/
<div class="row">
<div class="column">
<h1>Latest News</h1>
<p>Lorem</p>
<p>Lorem</p>
</div>
<div class="column">
<h1>Application</h1>
</div>
</div>
Im sure there's something silly I've overlooked....
When using inline-block, you need to set the vertical-align to your desired property.
In your case, adding it to your .column css as follows corrected the issue:
.column {
width: 460px;
height: 100%;
display: inline-block;
vertical-align: top; /* Adding this causes them to line up evenly across the top */
border: 1px solid #000;
padding: 15px;
}
Fiddle
Related
I'm having a problem with borders in between two divs and so I've tried a couple of different pieces of code to see if it gives me what I need; for example, I tried using a new <div > in between the divs I want the vertical border to be in, but I don't think I'm inputting the information correctly. I understand that you have to also add code to your CSS sheet but wwhat should it look like exactly? What's the proper way?
Taking this piece of code into consideration: How would I go by adding a vertical line in between the #content and the #sidebar? You could say that its a vertical line that separates both elements if it had text.
<div id="container">
<div id="header">
header content here
</div>
<div id="content">
main content here
</div>
<div id="sidebar">
sidebar content here
</div>
<div id="footer">
footer content here
</div>
</div>
=============CSS============
#container {
width: 960px;
margin: 20px auto;
}
#header {
}
#content {
float: left;
width: 620px;
}
#sidebar {
float: left;
width: 340px;
}
footer {
clear: both;
}
Here's an image as to how this code would look in text. Example with text of code given above
So basically, I'm trying to figure out how to add a border in between the left paragraph and the right paragraph.
I hope its understandable and my question is clear enough.
Thanks,
You can use border-left-style: solid; in your #sidebar or using border-right-style: solid; in your #content
I have an idea but I'm not sure how well it will work. Put 'first name' input down to the 'Access now' button as one div and define a border-left css property like so:
`.mydiv{
border-left: thick double #777;
}`
Update 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
I have these three sections that have three sections underneath them and I would like for the ones below to follow the ones directly above them. For example in this codepen the second section below does not go directly underneath the second section above, because the first section above is a little longer.
codepen.io/anon/pen/apEQRE
Is there a way to fix that?
Not easily without changing your HTML structure. You could float the elements to the left rather than displaying them as inline-block, however, the element on the bottom left would have the same problem. You could display them as flex, but that would cause problems with the way the text is formatted.
What I would recommend is diving the sections into three defined columns:
<div class="column">
<section>
<h2>Title</h2>
<p>Text</p>
<p>Text</p>
</section>
<section>
<h2>Title</h2>
<p>Text</p>
</section>
</div>
Then you would need to slightly change your CSS to cover this:
.column {
float: left;
width: 33.33%;
}
section {
text-align: center;
background-color: white;
width: 90%;
padding: 15px;
border: 1px solid #007d87;
margin-bottom: 5px;
opacity: 0.8;
display: inline-block;
text-align: left;
vertical-align: top;
}
I've created a new pen showcasing this.
Note that your example has identical sections, but in practical application, you'll need to re-order the sections so that they read left to right, rather than top to bottom.
Hope this helps!
I have a regular Bootstrap 3 CSS setup. I want to apply the same heights to columns inside a row and have been looking at using display:table and display:table-cell. This method works but it naturally seems to apply vertical padding on the columns with less content.
Take this HTML for example:
<div class="row">
<div class="col-xs-4">
<div class="block">
Content for block<br />
Some more content<br />
And a bit more<br />
Last bit
</div>
</div>
<div class="col-xs-8">
<div class="block">
Content for block<br />
Only some more content
</div>
</div>
</div>
Then this CSS:
.row {
display: table;
width: 100%; }
.row > div {
float: none;
display: table-cell;
vertical-align: top; }
.block {
height: 100%;
background: red; }
Now the columns do have the same height, but the .block, which has the red background does not reflect this, because the second column has bottom padding applied which I cannot remove.
See this fiddle for an example: http://jsfiddle.net/cyan8fjz/
Is there a solution to get my .block to use the full height:100%? Ideally I do not want to absolutely position the .block because of the left and right padding on the columns (which may change at different screen resolutions).
Note I haven't included the Bootstrap CSS in my example above but I have in the fiddle. Assume it is relevant and included in all examples.
You could use like this ' padding-bottom: 1000em; margin-bottom: -1000em; trick.
Here's an example: Link
I understand the container > row > col-size-# css format for creating responsive columns. There is an area of our site where we need to use defined column widths inside a container and do not use the container > row > col-size-# format.
.special-area{
width: 300px;
}
.special-area .one-third{
width: 100px;
padding: 0px;
margin 0px;
display: inline-block;
}
The expected outcome is 3 columns each 100px wide displayed side by side in 1 row.
Instead, we are getting 2 columns side by side and the 3rd column underneath the 1st.
How can we make 3 columns side by side?
You used display:inline-block, that means those divs are acting like words. And you know, for word, a space is counted. You can use following to collapse spaces.
.special-area{
white-space: nowrap;
}
.special-area .one-third{
white-space: normal;
}
Float the inner DIVs and they'll be on the same line, like in this fiddle.
The HTML
<div class="special-area">
<div class="one-third"></div>
<div class="one-third"></div>
<div class="one-third"></div>
</div>
The CSS
.special-area{
width: 300px;
}
.special-area .one-third{
width: 100px;
padding: 0px;
margin 0px;
display: inline-block;
background:red;
height:1px;
float:left;
}
Height and background color added to demonstrate.
Chris Coyier deftly explains why this happens and presents multiple solutions at http://css-tricks.com/fighting-the-space-between-inline-block-elements/
The solutions by #Iqbal and #MatthewJohnson work. Another option that doesn't require css is to type the html differently:
<div class="special-area">
<div class="one-third">
Content</div><div class="one-third">
Content</div><div class="one-third">
Content</div>
</div>