I have a three even columns using flexbox. In CodePen it looks more clear: https://codepen.io/pixy-dixy/pen/KKVwvoQ
Here is the code:
.rowIdeas {
text-align: center;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.columnIdeas {
flex-basis: 25%;
}
.maxSize {
max-height: 300px;
}
<!-- about ideas section start -->
<div class="rowIdeas">
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/philosophy.svg">
<h2>Item one</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
<div class="idea columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/idea.svg">
<h2>item two</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).
</div>
</div>
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/results.svg">
<h2>item three</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
</div>
<!-- about ideas section ends -->
The code works fine here and in CodePen, but when I put the same code in my landing page, I see this:
As you see the first one goes a bit upper than others.
Any idea what the problem is?
The problem is that the svg images are differnt proportions. So the one on the left is actually shorter, so the title doesn't drop as low as the others. You'll have to either give them a specific height, remake it so they're all the same height, or otherwise account for the varying sizes.
Related
I'm using images as bulletpoints for my Github Pages (markdown files), as described here. Now, I'd like to center the text next to the image vertically. This is shown here (cf. lower third of page), but I have to do it with inline css and cannot get it to work.
What I have so far:
<ul style="list-style-image: url('/assets/images/thumb.jpg'); padding-left: 120px;">
<li>I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines</li>
</ul>
gives me
when I'd ideally want it to look like:
I already tried setting the line height, but this results in weirdness when there's a linebreak, as is the case here. I read about flexbox, but am unsure how to use it inline. Any help is appreciated!
I repeat: IT MUST BE INLINE !!
Why don't use in your HTML something like this:
<div class='list-item'>
<img src='/assets/images/thumb.jpg' class='bullet-image'/>
<p class='item-text'>Lorem ipsum...</p>
</div>
And then in your CSS you could add:
.list-item {
display: flex;
align-items: center;
justify-content: center;
}
That should do the trick. Then you can re-size the image as you like.
EDIT:
Another thing you can do, using inline styles is something like this:
<ul>
<li style="display: flex; justify-content: center; align-items: center">
<img src='/assets/images/thumb.jpg' style=""/>
<p> I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines </p>
</li>
</ul>
Then you should resize the image to the size you like by adding the width and height properties on the style attribute of the img element
First, my code:
<main class="main">
<h1 class="title">A title here</h1>
<h2>Another Element Here <span id="subtitle"></span></h2>
<h3 id="thirdtitle">h3 el here</h3>
<div class="overlay" id="one">An alert message here!</div>
<div class="overlay" id="two">
Another alert message here
</div>
<div class="overlay" id="three">A third alert message here, relaunch? <span id="startappagain">Click me </span></div>
<div id="gridelement" class="grid"></div>
</main>
1st question:
I'm using display flex, flex-direction column and justify-content: center and align-items: center on main, I made some interactions on gridelement using JS and "one", "two" and "three" are just alerts so their visibility is set on hidden, and sometimes, they become visible for 1 second when there's an error during the interaction with the JS in the gridelement element.
But when using visibility, unlike display: none, they still take up normal space so there's blank space between h3 and gridelement most of the time, so I would like to have the three elements overlap to minimize the blank space. I've tried playing around with positions which is tricky with display flex. Any idea for something clean? Thanks!
Additional question:
I was also thinking of having the messages just overlap the grid, but since I'm using flex on the grid elements as well, it would just mess up the whole design of the gridelement elements if I had them in the grid (especially that there's nothing in gridelement initially, everything is created in my JS), any idea how I could just make the messages appear in the middle of the screen? They stay there for a second anyway.
Thanks!
I would suggest you to use max-height property along with visibility like this:
.overlay {
max-height: 1000px;
}
.overlay.hidden {
max-height: 0;
visibility: hidden;
}
Let's say I have some structured content in HTML – for example text in paragraphs grouped into some sections. And let's say I have another instance of the same structure and I want to display both contents as two columns side by side using HTML and CSS. How to do that? The point is that I want that corresponding elements (paragraphs, sections) inside the columns are aligned so they start at the same height.
Examples of such structures may be a bilingual page, or a source code together with numbers of lines or with some side comments to individual lines.
The only idea I have is to use a table, but I'm not sure it is the best solution. I want to be able to select the content as if the column was an ordinary web page, but selecting in a table works in a way that cells in a row are selected first.
An example follows. Recall that I want the corresponding elements to start at the same height.
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.main {
margin: auto;
width: 500px;
}
.column {
float: left;
width: 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
</div>
</body>
</html>
If you want each section/subsection to start at the same height I would suggest to do like this:
<div class="main">
<div class="row">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
</div>
</div>
<div class="row">
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>This text might also be longer so you need to push the next section's as well to start at the same height</p>
</div>
</div>
</div>
Same (almost) as a table but with div's.
I'm no "flex-box" expert so that might be a way, though with less broad browser support.
If you can't/don't want to use the "row" elements (and no/can't/don't want flex option) you will need a javascript snippet that iterate through your elements and compute margins to be set.
UPDATE
Check these 2 links, they will help you set this up as you like using flex:
- https://chriswrightdesign.com/experiments/using-flexbox-today/#card-layout
- http://codepen.io/imohkay/pen/PwPwWd/
A future proof way without using javascript.
UPDATE 2
And this one has some really cool grid solutions:
- https://philipwalton.github.io/solved-by-flexbox/demos/grids/
Well, I dont know what exactly You want... I thing that You might want two sections side-by-side, where You can place anything... Thats what I found:
make two div's <div id="first"> and <div id="second">
and place what You want in them. Now css:
#first {float:left;width:50%;}
#second {float:right;width:50%;}
Make sure You have body {padding:0; margin:0;}
If I understand your question correctly, you are searching for an HTML-structure which shows two items next to each other. Each of the properties of this item (i.e. the subsections) should have the same height. And, when the user selects the text, then the whole row (i.e. the same property from both items) should be selected.
I have the feeling that in order for the user to be able to select content the way you want, the structure needs to be correct, as I believe that the browser selects content according to the structure (not sure, this is always true though).
The question is, if you are free to use any HTML-structure you like?
When I try below example, it works for me. The solution is to use a list (ul with li) per "property" (row), making the lis display as inline-block. That way, they don't break and, as they are block elements, they always have the same height per "line". With vertical-align: top; all content starts at the beginning of the element.
I adjusted the content so we definitely have different line heights and wrapping, just to be sure it works.
Styling:
<style>
ul {
list-style: none;
}
ul li {
display: inline-block;
vertical-align: top;
width: 20%;
}
</style>
HTML:
<ul>
<li>Section 1</li>
<li>Section 2<br/>(with new line)</li>
</ul>
<ul>
<li>Some text</li>
<li>The text translated to another language, which may be longer.<br /><br />
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer. </li>
</ul>
<ul>
<li>The text translated to another language, which may be longer.
The text translated to another language, which may be longer.</li>
<li>Some text</li>
</ul>
Thank to LGSon, I have learnt about flex. I tried to put together a solution. The following code somehow works, but there are some issues:
One has to add `order` attribute to all elements.
For some reason flex doesn't overlap margins like it is done in standard situation so all the vertical spaces are bigger.
It would be know hard to e.g. add a border around whole column.
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.container {
margin: auto;
width: 500px;
display: flex;
flex-wrap: wrap;
}
.container > * {
flex: 0 0 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="container">
<h1 style="order: 1">Section</h1>
<p style="order: 2">Some text</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
<h1 style="order: 1">Section</h1>
<p style="order: 2">The text translated to another language, which may be longer.</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
</div>
</body>
</html>
Use css column-count CSS property: https://css-tricks.com/almanac/properties/c/columns/
Update
After re-reading the question, I think if you want both columns to start at the same height, you can use min-height on both columns, but be aware that the content will later push the height as it grows.
To maintain the height even with content, put a fixed height then have apply overflow-y:auto; or overflow-y:scroll. That way both boxes will have the same height, and can be scrollable in case content grows
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.