Apologies for the rather odd title question, it's a difficult one to explain. I'm attempting to create a WordPress that uses two columns, side by side, to display content from the same loop. The effect I'd like to achieve would be formatted like this:
http://itsmeifrah.tumblr.com/
Only with text posts and not images. I'm stumped on how to do this, though. I've tried floating all div's left and assigning them each the same width, but this causes content to be misaligned when some posts are longer than others. Plus, this is for dynamically created content, so I have to figure a solution that's WordPress loop-friendly. In order to help illustrate this issue, I've drawn the following rather crude png:
http://s13.postimage.org/yoo4z9g9z/content_misaligned.png
Please help!
You must create columns and then put your content.
HTML:
<div class="multi_col">
<div class="col">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
</div>
<div class="col">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
</div>
</div>
CSS:
.mutlti_col
{
width: 420px;
}
.col
{
float: left;
width: 200px;
margin-left: 10px;
}
.item
{
width: 200px;
margin-top: 10px;
}
Please check jsfiddle.
Related
I'm creating a portfolio section working with Bootstrap 4 and learning flexbox. Each portfolio item initially contains a thumbnail that expands/collapses with more details when clicked.
At full width, the items run in rows of 4 columns. Can I use flexbox to get the detailed description (pabout) to expand below the current row and run full width? i.e. On mobile, items will be in 1 column and clicking an item will expand the description below the item clicked. At larger widths, the description will expand (to make a new row) below the row at full width.
Looking for the CSS for the expanded row. I can manage the JS.
<section id="test" class="container">
<div class="flex-container">
<div class="pitem">
<div class="pcard">
<p>Title 1</p>
</div>
<div class="pabout">
Detailed description goes here
</div>
</div>
<div class="pitem">
<div class="pcard">
<p>Title 2</p>
</div>
<div class="pabout collapse">
Detailed description goes here
</div>
</div>
<div class="pitem">
<div class="pcard">
<p>Title 3</p>
</div>
<div class="pabout collapse">
Detailed description goes here
</div>
</div>
<div class="pitem">
<div class="pcard">
<p>Title 4</p>
</div>
<div class="pabout collapse">
Detailed description goes here
</div>
</div>
</div>
</section>
Update:
Here's some CSS/HTML I'm working with. I don't mind if either the description div expands to the full viewport width or the Bootstrap container bounds.
https://codepen.io/codecarson/pen/zEPXge
Changing last item's flex-grow :
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
//This change
&:last-child{
flex-grow: 5;
}
}
Seems to work as brute force method. Or are you searching for something more intelligent ?
I have created a header div as follows:
<div class="header">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
Here is the header class:
.header {
background-color: #5DBCD2;
height: 10%;
}
Even though the div's max height is restricted to 10%, the image exceeds this.
Can someone please help
Add the following to your CSS so that you can have the image contained within the div nicely as it scales down.
.header img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
You can also add overflow: hidden; to the header element but that will cut it off rather than scale it, but it is another potential option.
I am not sure if it will be to any help, but try to add a max-height to the image in CSS.
EDIT
You could add this in the CSS (so that the image has 10% of the width of the parent):
.img-responsive {
width: 10%;
}
I tried your code with an image of 2000 x 1522 pixel dimensions.
Worked fine.
Few things you can do:
1) Debug your page using Developer tools in the browser.
2) Check if your css file path is correct.
3) Check for any errors in console part of the developer tools.
In your above code bootstrap before declaring row you must first declare container you should have something like this below
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
<img class="img-responsive" src="logo.png"/>
</div>
</div>
</div>
</div>
Probably this should work
I found an answer here that addresses what I need to do, but it doesn't seem to work perfectly for me. I have sidebar divs floated left and right. I want to stick a div in the middle and fill the space. The technique in that answer works for the left div, but it pushes the right div down to the next line. I threw up a quick demo on CodePen to show the problem.
Can anyone suggest a way to fix this so that all the divs are on the same line?
Update: I realize I could do this easily using percentages for all the div widths, but I really need to maintain static widths for the sidebars.
One way to do this would be changing the order of your HTML (placing the right sidebar before the left)
<div class="page-grid">
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div id="content">Content area</div>
</div>
http://codepen.io/anon/pen/kHmjd
This is using an example from Dynamic Drive's CSS Layouts
I like this one, especially because it preserves the order of the content semantically. Main content is delivered first, followed by both side columns.
HTML
<div class="page-grid">
<div id="contentwrapper">
<div id="content">Content area</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
</div>
CSS
#contentwrapper {
float: left;
width: 100%;
}
#content {
margin: 0 15em;
}
.sidebar {
float: left;
width: 15em;
}
.sidebar.left {
margin-left: -100%;
}
.sidebar.right {
margin-left: -15em;
}
I have some divs that should take the entire height of a page. I managed to get this working as i needed. (Some fixed rows and some flexible rows) like in a html table.
I took the solution from one of my other questions here:
Layout divs in css like table cells in HTML Tables
Today i had to add a div inside the flexible row which should take 100% of the height of the flexible row. Which works great in all major browsers. Muahaha that was a good joke wasn't it? Of course this doesn't work as expected in IE see my js fiddle:
<div class="tableContainer">
<div class="row rowA">
<div class="cell">Test</div>
</div>
<div class="row rowB">
<div class="cell">Test</div>
</div>
<div class="row rowC">
<div class="cell">Test</div>
</div>
<div class="row rowD">
<div class="cell testcell">
<div class="testcontent">Test</div>
</div>
</div>
<div class="row rowE">
<div class="cell">Test</div>
</div>
</div>
http://jsfiddle.net/7ewEJ/3/
the ie seems to take the "100%" from the page and not from the enclosing flexible table row. So the blue div should take the whole space of the purble table row.
Am i doing anything wrong?
Could this be a bug in ie's height calculation?
http://jsfiddle.net/7ewEJ/5/
div.testcell{
height: 100%;
width: 100%;
min-width: 1px;
min-height: 1px;
/*background: #fff;*/
align: center;
display: block;
}
I recently made a website where I needed 6 columns with the y overflow visible. I couldn't make a clean 6 divisions. The width needed to be wider to adjust for the 6 scrollbars and a bit of padding.
Is there a better way than my attempt?
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
.col {
width: 15.2%;
padding-right: 15px;
float: left;
}
.section {
overflow-y: scroll;
width: 100%;
}
It's very sloppy and the columns don't reach the far right edge.
I don't know jquery well enough to attempt but will like take any advice.
****** I worked it out, so silly. You need to use % for everything including padding. Duh ******* Sorry for wasting anyones time!
I would say that it is better to set padding for the inner div .section, so there will be no need to adjust .col width.
Try this HTML code:
<div id="grid">
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
<div class="col">
<div class="section">
Content that overflows this section.
</div>
</div>
</div>
With this CSS:
#grid {
margin-left: -15px;
}
.col {
width: 16.6%;
float: left;
}
.section {
overflow-y: scroll;
margin-left: 15px;
height: 100px;
background: green;
}
Please note that #grid { margin-left: -15px; } will help you get rid of unnecessary white space before first column
take a look at Live demo