Nested flexboxes - HTML / CSS

426 256MB

I'm trying out using flex boxes to get columns to have the same height.

My page layout looks like this:

Expand|Select|Wrap|Line Numbers

 <body>

    <div id="container">

        <div id="site_header">

        </div>
 
        <div id="menu">

        </div>
 
        <div class="page_header">

        </div>
 
        <div id="content">

               <div class="left">

                <div class="left_content_box">

                </div>
 
                <div class="search">

                </div>
 
                <div class="left_content_box">

                </div>

            </div>
 
            <div class="main_content" style="padding-right: 0 !important; padding-left: 0 !important; width: 584px !important;">

                <div class="content_header ">

                </div>
 
                   <div class="content">

                       <div class="breadcrumb">

                    </div>
 
                    <div class="main">

                    </div>

                </div>
 
                <div class="right">

                    <div class="right_content_box">

                    </div>
 
                    <div class="right_content_box">

                    </div>

                </div>
 
                <div class="content_footer">

                </div>

            </div>

        </div>
 
        <div class="page_footer">

        </div>
 
        <div id="site_footer">

        </div>

    </div>

</body>

At the present I've used flex boxes to get the left column and the main column to be the same height. What I need to do is get the content division and the right division the same height. I tried doing but all it did was placed the right division below the content division.

This is my css

Expand|Select|Wrap|Line Numbers

 #container {

    margin: 0 auto;

    text-align: left;

    width: 980px;

}
 
#content {

    display:-moz-box; /* Firefox */

    display:-webkit-box; /* Safari and Chrome */

    display:-ms-flexbox; /* Internet Explorer 10 */

    display: flex;

    flex-flow: row;

        justify-content: center;

    margin: 0 auto;

    width: 980px;

    min-height: 600px;

}
 
.content {

    float: left;

    min-height: 500px;

    padding: 0 10px 0 28px !important;

    width: 317px;

}
 
.main_content {

    -webkit-flex-grow: 0;

    -webkit-flex-shrink: 0;

    -webkit-flex-basic: auto;

    -moz-flex-grow: 0;

    -moz-flex-shrink: 0;

    -moz-flex-basic: auto;

    -ms-flex-grow: 0;

    -ms-flex-shrink: 0;

    -ms-flex-basic: auto;

    min-height: 500px;

    padding: 0 28px !important;

    width: 528px !important;

    margin: 30px 28px 30px 1px;

}
 
.content_footer {

    float: left; 

    width: 742px;

    padding: 0 !important;

    margin: 0;

}
 
.site_footer {

    margin: 0;

}
 
.page_footer {

    width: 970px;

    padding: 0 5px;

    margin: 0;

}
 
.content_header {

    float: left; 

    width: 564px;

}
 
.site_header {

    margin: 0;

    padding: 0;

}
 
.page_header {

    width: 980px;

    padding: 0;

    margin: 0;

}
 
.left   {

    -webkit-flex-grow: 0;

    -webkit-flex-shrink: 0;

    -webkit-flex-basic: auto;

    -moz-flex-grow: 0;

    -moz-flex-shrink: 0;

    -moz-flex-basic: auto;

    -ms-flex-grow: 0;

    -ms-flex-shrink: 0;

    -ms-flex-basic: auto;

    min-height: 500px;

    padding: 0 !important;

    width: 336px !important;

    margin: 30px 0 30px 28px;

}
 
.right  {

    float: right;

    padding: 0 !important;

    width: 228px !important;

    margin-left: 1px;

}

Is there a way to nest the content and the right box inside the main content box?

Feb 7 '14 #1

Subscribe Post Reply

2310

KeredDrahcir

426

256MB

Can't anyone help me? If you need mpre detail let me know. I'm stuck without being able to fix this.

Mar 7 '14 #2

Similar topics

Pre-Populate a Form that nested tags

by: Glen | last post by:

I have a Struts action form which contains a bean. I am trying to display a bean retrieved from the database in this form using the nested tag. Can anyone help me? I continue to get an error...

Java

Reasoning behind nested scope

by: Andy Baker | last post by:

Hi there, I'm learning Python at the moment and trying to grok the thinking behind it's scoping and nesting rules. I was googling for nested functions and found this Guido quote:...

Python

Concept of nested classes

by: Erik Bongers | last post by:

Hi, Nested classes only seem to be able to access static members of the surrounding class : class SurroundingClass { public: class InnerClass { public:

C / C++

Nested conditional expressions ---- good idea/bad idea?

by: nimmi_srivastav | last post by:

Below you will see an example of a nested conditional expression that this colleague of mine loves. He claims that it is more efficient that a multi-level if-else-if structure. Moreover, our...

C / C++

Nested classes

by: B0nj | last post by:

I've got a class in which I want to implement a property that operates like an indexer, for the various colors associated with the class. For instance, I want to be able to do 'set' operations...

C# / C Sharp

Using Reflection With Nested Classes

by: Robert W. | last post by:

I've almost completed building a Model-View-Controller but have run into a snag. When an event is fired on a form control I want to automatically updated the "connnected" property in the Model. ...

C# / C Sharp

friend sibling class nested in derived class problem in gcc 4.0

by: Tomas Sieger | last post by:

Hi all, I'm in doubt with the following code: class Base { public: class Nested {}; }; class Derived:public Base { public: class Nested {

C / C++

Why is C# 450% slower than C++ on nested loops ??

by: Peter Olcott | last post by:

http://www.tommti-systems.de/go.html?http://www.tommti-systems.de/main-Dateien/reviews/languages/benchmarks.html The above link shows that C# is 450% slower on something as simple as a nested loop....

C# / C Sharp

The </li> before a nested list. Why not?

by: patrick j | last post by:

Hi I'm wondering about lists with nested lists as one does on a Saturday afternoon. Anyway below is an example of a list with a nested list which the iCab browser's very useful HTML...

HTML / CSS

Howto declare a friend function to a nested class

by: jdurancomas | last post by:

Dear all, I'm trying to declare the operator++ to a nested class. The nested class is not template but the container it is. The code used in teh sample program is included bellow: ...

C / C++

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware