Hi from wet and windy 21 degrees C York UK…
I have began the job of designing a page like this below:
But Ive got my self into a bit of div confusion. I thought by setting the widths to 50% that would in affect create two columns underneath spanning top row. Here is the codepen:
Not only am i unable to get the columns to fill just 50% I’m also having trouble with the images having text to the right of them 
Any insights welcome 
Your CSS isn’t even taking effect. For multiple reasons. FYI please come up with better ID / class names. #packages, #packages1, and #packages2 is all very odd naming. Your relationship with them is parent → child / child. Also it’s confusing becuase one is #packages, and the children are #package1/2. Please work on your ID/class naming.
FYI if you want to select an element with an ID and a class, then you have to concentate the selector. You had this:
#packages .fluid{}
Which is trying to select a .fluid child within #packages. When in realiaty they were the same element. You need to do
#packages.fluid{}
There are a lot of issues I saw, but validation is needed first.
I have to run to meeting so I am sorry I cant provide an actual answer in code. But I did notice the following errors:
I think you trying to target tags like: <div id="package" class="fluid"> with the selector: #package .fluid{} , which should be: #package.fluid{} ( no space, otherwise you are actually targeting elements which are descendants of #package with a class of .fluid)
The use os so many ID could be causing some SERIOUS specificity conflicts . Remember CSS targets by select or and order in the stylesheet, not by name space . In other words if you have one wrapper with #ID2 thats inside another wrapper named #ID1 and a target element: . target. If you wrote
#ID1 .target { color:green}
#ID2 .target { color:red}
you would have a conflict, causing your text inside .target to be green.
In short, so many IDs/ nested IDs is asking for trouble.
Aside from the issues mentioned.
They would also need to be display: inline-block rather than the default block for div’s, for them to appear side by side.
But for that kind of 2 col layout, I would probably go with display: table for a parent container and display: table-cell for the 2 columns. You could also add table-layout: fixed to the parent to keep them even sized.
Thank you Ryan, will work through this this afternoon
Thank you Sam, will work through issues this afternoon
Yes sounds like ive created a coding cluster f@!k !! Its my speciality 
Will work through your recommendations this afternoon, thank you.
Ok I’ve gone down the table route to achieve the layout I want. Here is where I am at now:
But before i go any further down the route of achieving the layout below with table mark up:
Ive hit an early problem. When the viewport is tablet sized and below the CSS talks to the table like so:
But when the viewport is expanded the CSS does not connect to the table and this happens:
Oppps! One suggestion is that a media enquiry is causing the CSS to get blocked but i cant figure out what curly bracket maybe causing the problem.
So my question is please: “How do I get CSS line 802 connected to HTML line 109 on all viewport sizes?”
Thanks in advance,
David
Hi,
You have 2 brackets missing after 2 media queries.
The section should be like this:
@media screen and (max-width:793px) {
.mobile-menu {
display: block
}
.mobile-menu + #menu {
display: none
}
.sf-menu li > ul,
.sf-menu li > ul {
display: block!important;
left: -999em;
}
.sf-menu,
.sf-menu li,
.sf-menu li a {
display: block;
float: none;
width: auto;
}
.sf-menu ul {
min-width: 0;
width: 100%;
opacity: 0;
-moz-transition: opacity .3s ease;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.sf-menu li.mobileShow ul {
left: 0;
top: 0;
position: relative;
opacity: 1;
}
}
/* this was missing */
/* hamburger Css end */
/* end hamburger menu */
/* main media queries follow here */
/* at 794 px width we hide the main menu and show the hamburger */
@media screen and (min-width:794px) {
#menu {
display: block!important
}
}
@media screen and (max-width:793px) {
.mobile-menu {
display: block
}
.mobile-menu + #menu {
display: none
}
.sf-menu li > ul,
.sf-menu li > ul {
display: block!important;
left: -999em;
}
.sf-menu,
.sf-menu li,
.sf-menu li a {
display: block;
float: none;
width: auto;
}
.sf-menu ul {
min-width: 0;
width: 100%;
opacity: 0;
-moz-transition: opacity .3s ease;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.sf-menu li.mobileShow ul {
left: 0;
top: 0;
position: relative;
opacity: 1;
}
}
/* this was missing */
See the closing bracket I added (above the comment /* this was missing */).
I have not had time yet to fully fathom what’s going on, but clearly things are a bit weird, with the horizontal scrollers appearing.
But one thing to mention straight off, the suggestion was to use display: table in css, as opposed to an actual
Brill that worked, you legend!!
If there is a tutorial to what you think works best for the layout i’m after please ping me the url. Sounds like a table may not be what you were hinting at, though it is creating the layout shape i want
Looks like half my post got lost!
Was just saying that you would be better with display: table rather than a html <table> for better semantics and so you can drop the 2 col layout on smaller screens by switching to another display type in a query.
Hi Sam,
I’m a bit of a noob at this stuff, is there an example I can see in action of your suggested approach please?
I don’t have a tutorial to hand right now, but
<div class="table">
<div>Package 1</div>
<div>Package 2</div>
</div>
and
.table { display:table; }
.table div { display: table-cell; }
@media screen and (max-width: 500px) {
.table, .table div { display:block; }
}
should have the same effect, the query is for when it gets too tight for 2 cols, it reverts to blocks and stacks them.
Don’t forget the vertical-align:top on that rule otherwise the content gets aligned on the baseline and will look weird 
Yes, that was just a bare bones example, it will need a bit more like width controls and suchlike to look right, probably table-layout: fixed to make the 2 cols equal.
Yes of course (It’s just something that I see often left out but can have startling effects to the unwary which is why I mentioned it.)
Yes probably a good choice also.
Hi Sam,
Ive goy myself in a complte div within div twist with this approach Going back to the original problem, can this solution create the below layout?
I goy t my self creating alot of divs and battling with text not lining up next too images. I suppose I am essentially trying to get a 4 column layout, got my self in a real muddle with this one
Yes, it can do. As mentioned, it will need some additional styling to make it look perfect, I was just showing the very basics to get two columns. It effectively turns the containing div to a table and the inner divs to cells. You don’t have to define rows if there is just one. I may try a simple pen if I find time.