473,324 Members | 2,239 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Styling web pages using flex.

I am using flexbox for styling my pages, I am using three columns in container, second and third columns are just for text and they look great but First column has images, buttons, links,text etc and everything is messed up here nothing is in order, some elements are overlaying each other. I want every new element in new line but that's not so, text and links appear on same line tried <br /> but it just adds little space and doesn't break line.

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. #container{
  3. background-color: #EDEDED;
  4. display: -ms-flexbox;
  5. display: -webkit-flex;
  6. display: -moz-flex;
  7. display: -ms-flex;
  8. display: flex;
  9.  
  10. -webkit-flex-flow: row;
  11. -ms-flex-flow:row;
  12. -moz-flex-flow:row;
  13.  flex-flow: row;
  14.  
  15.  -webkit-flex:1 0 auto;
  16.  -moz-flex:1 0 auto;
  17.  -ms-flex:1 0 auto;
  18.  flex:1 0 auto;
  19.  
  20.  -webkit-flex-wrap:no-wrap;
  21.  -moz-flex-wrap:no-wrap;
  22.  -ms-flex-wrap:no-wrap;
  23.   flex-wrap:no-wrap;
  24.  
  25.  -webkit-order: 1;
  26.   order: 1;
  27.  
  28.   justify-content:flex-start;
  29.   align-items:flex-start;
  30.  }
  31.   .column{
  32.    padding: 1rem;
  33.    list-style: none;
  34.    display: -webkit-box;
  35.    display: -moz-box;
  36.    display: -ms-flexbox;
  37.    display: -webkit-flex;
  38.    display: flex;
  39.    flex-flow:row;
  40.    -webkit-flex-flow: row;
  41.    align-content:flex-start;
  42.    align-items:flex-start;
  43.    justify-content: space-around;
  44.    align-self:stretch;
  45.    flex-wrap: wrap;    
  46.    -webkit-flex-wrap:wrap;
  47.    }
  48.    </style>
  49.  
  50. <div id='lhs' class='column' style='width:21%;margin:0px 0px 10px 0px;'> // columns starts 
  51. <img src="<?php echo $pic; ?>"  />
  52.  
  53. <b style="font-size:15px;"><?php echo $name ?></b><br />
  54.  
  55. <i style="font-size:13px;"><?php echo $info; ?></i>
  56.  
  57. <div>
  58. // php code for calling some functions
  59. <a href=""></a>
  60. </div>
Oct 30 '15 #1
0 6470

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: ghadley_00 | last post by:
MS Access Create form / report with multiple pages using different background images Hi, Would like to have users fill out a multipage form, and then click a print button, which pulls up the...
2
by: Vaibhav Shah | last post by:
Hi, Can we secure HTML pages on a web site using asp.net? We have a requirement in which we want to display a login page before a visitor can view any HTML page on our website. WE have...
1
by: anna_john | last post by:
How do i link to multiple pages using the same link? i would like to get an answer related to jsp or javascript
1
by: diasrob | last post by:
Hi all, Is it possible to get data (non-formated text data) form web pages using C++ programming ? I need to get some achieved in the LAN of my company for optimizing a daily task I do. Sorry...
1
by: mapoza | last post by:
Hi Guys, Can anyone tell me how to generate HMTL pages using simple Java print statements? Thanks Mapoza
0
bartonc
by: bartonc | last post by:
Examples of wx.Wizard that I found used explicit names for the pages. Using eval() in a list comprehension, I am able to go through the imported modules by name and call create() in order to get a...
8
by: ak | last post by:
Hi Guys, I was just wondering whether it is possible to translate JSP pages into ASP pages using XSLT. What I want is to be able to open a currently available website developed in JSP in a...
1
by: PanchalRakesh | last post by:
Dear All I am Making an application in which i want to create resume for a person usign web application and now i want to print that resume in A4 size pages using client print But i am not...
8
by: CF FAN | last post by:
We have an issue with refreshing pages using JavaScript. We have got three pages. From page 1, page 2 is opened by window.open and from page 2, page 3 open up by window.open and also closes page 2....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.