Hello everyone and thanks for your help in advance. I am trying to learn responsive design and flexbox, but am just not getting it. I have a page at http://www.kidsmedicalcare.net/home/index3. I’m trying to do some simple things, but just can’t get it right. All I want to do at this point is center the white background container, then create a three row layout, header, main body, and footer. I’m wondering if this is even a bad application for flexbox, but don’t know enough to determine that. Any help would be appreciated.
I probably wouldn’t use flexbox there, because there are easier ways of centering the background container, such as giving the container a percentage width, then using auto for the left and right margins.
1 Like
Thanks for the response. For a responsive newbie, any suggestions for layout, i.e. divs set up as a table, etc?
You may get different suggestions from others here, but this is a very simple layout, so you could make it responsive just by what I suggested. No need for CSS display: table. Just
#divpagewrap {
width: 80%;
max-width: 1020px; /* whatever you want here */
margin: 0 auto;
}
That would give you a fluid container and the child divs would expand to fill the width of this container unless you restrict their widths.
Your media queries for the inner divs would depend on the kind of content they have, and where the layout tends to break as you decrease the browser window size.
1 Like
Thanks for the response. I reworked the page again, but where I am running into problems is the placement of what should be the center content, which seems to always float to the top right. I really don’t understand why. The two previous div tags take up 100% of the container, so I would think the divmain should display below.
The two divs which form the header are floated, so you’ll need to clear them. Just add clear: both to #divmainbody.
Although they fill up 100% of the width they are not the same height and that means that any following elements will slide up to try and fill any gaps above (because that’s what floats accomplish).
As TechnoBear said above you need to ensure content is cleared if you don’t want it to wrap up alongside previous floats.
I thought you were doing this with flexbox anyway and you had the header elements set up correctly in your other thread with flexbox? Why the return to floats unless it is just a learning exercise. I rarely use floats for structural layout these days and would used display:table-cell properties for horizontal alignment if older browsers need to be supported or flexbox for modern browsers. Floats have many side effects and unless you know how they work in detail you will run into issues.
Your #rightheader set at 20% width is a bad mistake as it soon becomes apparent that your telephone numbers will not fit on one line and will wrap as the window gets smaller. It would be better to give the right column a fixed width so that the telephone numbers don’t wrap at smaller screens. This means you want the leftheader to be a fluid width which will exclude floats unless you want to use calc() to determine the available space. Flexbox (or the older displaytable table-cell will do this easily) and allow items to fit more fluidly.
Don’t use ids for everything as that makes it harder to control specificity. Use classes to define the styles and that keeps specificity even. Don’t append ‘div’ to every style rule as that is a waste of space and is not going to help you.
I also note you had the link to the stylesheet in the body and that belongs in the head.
When you use flexbox you don’t need to do the whole thing in flex. Just use it where needed.
Here is a quick re-jig of how I would start with your code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" >
<title>Diana McLaughlin, M.D., P.A. - Kids' Medical Care</title>
<link href="/Content/MediaQueryTest.css" rel="stylesheet">
<style>
h1, h2, p {
margin:0 0 1em
}
html, body {
margin:0;
padding:0;
height:100%;
}
body {
background: #DE6700 url(../images/bg.jpg) repeat-y scroll 50% top;
margin: 0 auto;
}
.pagewrap {
margin: 0 10px;
max-width: 1020px;
background-color: white;
min-height:100%;
}
.header, .main {
padding:10px;
}
.header h1 {
font-family: 'Comic Sans MS';
color: teal;
font-size: 2em;
margin:0 1em 1em 0;
}
.header p {
font-family: 'Comic Sans MS';
color: teal;
font-size: 1em;
margin:0 0 1em;
}
@media only screen and (min-width: 768px) {
.pagewrap {
margin: 0 auto;
width:100%;/* needed for display:table*/
display:table;
height:100%;/* treated as a minimum for table display*/
}
.header {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 0 1em;
}
}
</style>
</head>
<body>
<div class="pagewrap">
<div class="header">
<h1>Diana McLaughlin, M.D., F.A.A.P.<br>
Kids' Medical Care</h1>
<p>Phone: (239) 591-8481<br>
Fax: (239) 596-0212</p>
</div>
<div class="main">
<h2>Main section goes here</h2>
<p> This is the center panel content. This is the center panel content. This is the center panel content. This is the center panel content. This is the center panel content. This is the center panel content. This is the center panel content. </p>
</div>
</div>
</body>
</html>
There are many other ways this could be accomplished but the main thing is to keep it simple and semantic and don’t add divs where none are needed unless for grouping purposes. Headings must be used in order and you shouldn’t jump from h1 to h3 as that is not logical. Your phone number isn’t really a heading as such and should just be a ‘p’ tag.
Hope it helps anyway 
2 Likes
Thanks so much for the response and help. Yes, I had originally started with Flexbox, but had been advised that might not be the best path. I appreciate your working model to give me something to deconstruct. I am a little confused about how the example is set up. First, I do realize Flexbox is meant for portions of a page and not necessarily for the whole page, but wondered what the advantage is to this example. Is it because this allows the separation or spreading of the H1 and P elements, rather than utilizing div tags and floats or CSS table layouts? I guess the other question is the use of display:table for the pagewrap as that doesn’t seem to affect the display.
I really appreciate the help.
The advantage of flexbox is as I mentioned in that you don’t need specific widths as you would with floats and you don’t need to worry about clearing content. It could be done with the display:table-methods if you wanted older browser support but these days flexbox is supported in all modern browsers so is the way forward.
CSS has many nuances and many rules that even some so called experts don’t fully understand. The reason I used display:table here is for a number of reasons.
- It is a more robust structure as it provides a new ‘block formatting context’ (technical term) for the content. (Technically speaking display:table does not create a new block formatting context but it is the automatically generated (anonymous) display:table-cell that creates the block formatting context. The browser generates this element automatically.)
- A block formatting context automatically contains child floats.
- Margins do not collapse through a block formatting context.
Also worth noting that display:table treats height as a minimum so you can use height:100% safely (although min-height:100% does much the same for block elements but just worth noting). Display:table is also shrink to fit so you need to use a width:100% to push it wide and then use a max-width to contain it. max-width on its own will have no effect unless content is already wider than that width.
To see the differences that can occur between the block and table display have a look at the following demo.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrap {
max-width:800px;
width:100%;
margin:auto;
background:red;
display:table;/* remove this via the web inspector and see the difference*/
}
p {
float:left;
}
</style>
</head>
<body>
<div class="wrap">
<h1>test</h1>
<p>floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content floated content </p>
</div>
</body>
</html>
Run the above demo in chrome and then toggle the display:table off using the chrome web inspector and you will immediately see the difference
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.