I've a question regarding a layout I'm making. I want to make a simple horizontal navigation menu and I'm starting out with this:
https://jsfiddle.net/74596pc8/
However, when I try to float the menu inside the 2 column to the right the margins of the first get all messed up, like this:
https://jsfiddle.net/33pf48u2/2/
HTML:
<div class="top-bar">
<div class="grid">
<div class="row">
<div class="col3">
LOGO
</div>
<div class="col9">
<nav class="right" style="height:55px;">
<div class="menu"><ul><li class="page_item page-item-2">Sample Page</li></ul></div>
</nav>
</div>
</div>
</div>
</div>
<div class="home-bar">
<div class="grid">
<div class="row">
</div>
</div>
</div>
<div class="home-posts">
<div class="grid">
</div>
</div>
Grid:
.grid {
margin:0 auto;
max-width: 1200px;}
#media (min-width: 600px) {
.row {
display: table-row;
width: 100%;
table-layout: fixed; }
.col {
display: table-cell; }
/* .row-padded {
margin-left: -1rem;
margin-right: -1rem; }
.row-padded .row {
border-spacing: 1rem 0; } } */
#media (min-width: 600px) {
.col1 {
display: table-cell;
width: 8.333333%; }
....
The Applied CSS:
/* Nav Menu
---------------------------------------*/
html ul,li{
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
.right{
float:right;
}
Please advise on why this is and how to fix it :)
thanks in advance.
Instead of using float right you can use text align: right property, it will give you the same result.
.right {
text-align: right;
}
Related
I am trying to design a section which 3 image. I can get the two images to display by block easily. I can float the third image to the right and adjust the height easily. However my issue is it does not align side by side.Below is an example of what I am trying to achieve
This is an example of what I have so far
.image-one,
.image-two {
width: 250px;
background-color: green;
display: block;
margin-top: 10px;
}
.image-three {
float: right;
background-color: lightblue;
width: 250px;
height: 200px;
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
You should be able to simple add flex to the container, and then add the content within a left and a right div.
Here's a working example:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.image-one,
.image-two {
width: 250px;
height: 95px;
background-color: green;
margin-bottom: 10px;
}
.image-three {
background-color: lightblue;
width: 240px;
height: 200px;
margin-left: 10px;
}
<div class="container">
<div class="left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="right">
<div class="image-three"> Image three </div>
</div>
</div>
You can use flexbox for this:
.container {
display: flex;
flex-direction: column; /* align items in columns */
flex-wrap: wrap; /* wrap to a new column when height is reached */
justify-content: space-between; /* add spacing in between top and bottom image */
height: 210px; /* height of your 2 images plus and spacing you want */
width: 510px; /* width of 2 columns plus any spacing */
}
.image-one,
.image-two {
width: 250px;
height: 100px;
background-color: green;
display: block;
}
.image-three {
background-color: lightblue;
width: 250px;
height: 210px; /* I would make this image the height of the other 2 plus spacing */
align-self:flex-end; /* align this to the right of the container */
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
Maybe you can add some internal divs like this:
<div class="container">
<div class="container-left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="container-right">
<div class="image-three"> Image three </div>
</div>
</div>
Then, add css to container-left and container-right to properly set the width and the float. Like this:
.container-left, .container-right{
width:250px;
float:left;
}
Why don't you make use of bootstrap columns?
HTML
<div class="container">
<div class="row main-row">
<div class="col-6 left-col">
<div class="row left-col-top">
<!-- Top left image here -->
</div>
<div class="row left-col-bottom">
<!-- Bottom left image here -->
</div>
</div>
<div class="col-6 right-col">
</div>
</div>
</div>
CSS
.main-row {
height:300px;
}
.left-col-top {
background-color:blue;
height:50%;
}
.left-col-bottom {
background-color:red;
height:50%;
}
.right-col {
background-color:green;
height:100%;
}
Easy flexbox solution :)
#main, #left {
display:flex;
}
#left {
flex-direction: column;
flex: 1;
}
.section {
flex: 1;
margin: 2px;
background-color: green;
}
<div id="main">
<div id="left">
<div class="section">Hello</div>
<div class="section">Hello</div>
</div>
<div id="right" class="section">Hello</div>
</div>
On a specific range of screen sizes (in the low 1000s), I have a content div that will move over a navigation div completely. It's as if both divs begin at the top of the page.
Here is the HTML:
<body id="about">
<div class="topnav" id="myTopnav">
Home
About
Contact
</div>
<div class="row">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
</div>
Here is the relevant CSS:
#media screen and (min-width: 993px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#myTopnav {
position: absolute;
top: 0px;
left: 0px;
}
.row {
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left h4 {
margin: 5em;
}
}
.rounded {
border-radius: 50%;
width: 65%;
}
#left {
margin: 0;
padding: 0;
}
#left h4 {
line-height: 150%;
}
#right {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
Why would the row div move on top of the myTopnav div?
You have given your #myTopnav an absolute position. This takes it out of the flow of page.
It means you must handle spacing other elements so they do not to overlap the absolutely positioned ones.
In your case, you need to give your row class a margin that matches the height of #myTopnav element.
Since row is a class that is probably used in many places, you should probably add a new css class and use that to set the spacing. e.g.
<div class="row with-spacing">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>
<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
CSS:
#media screen and (min-width: 993px) {
.row.with-spacing {
margin-top:50px;
}
}
I have 2 divs next to each other and on ipad(portrait) i want the right div to display on top of left div.
Code:
<div class="main">
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
<div class="main">
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
<div class="main">
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
Css:
.both {
width: 100%;
display: -webkit-inline-box;
}
.left-go-bottom, right-go-top {
height: 769px;
width: 50%;
background-color: darkblue;
}
.main {
display: block;
width: 100%;
height: 769px;
}
The first div class .left-go-bottom is first and wil be on the left the second div class right-go-top is second and wil float on right side.
For my media query at the break point i added.
Css:
#media only screen and (max-device-width: 1024px) and
(min-device-width: 768px) and (orientation: portrait) {
.left-go-bottom, .right-go-top {
width: 100%;
float: left;
display: block;
}
}
So it works fine, but the div on the top i need on the bottom and the one currently bottom i need top, i tried floating the top one right and bottom left , did not work, any help please.
you can use display:flex; on .both and then in the media query use flex-direction:column-reverse this will reverse the order of your boxes
i have added background:red to the right-go-top div for example purposes.
also changed the media query for the same reason ( it will work the same with your media query )
see snippet below or jsfiddle > jsfiddle flex
let me know if it helps
.both {
width: 100%;
display:flex;
}
.left-go-bottom,.right-go-top {
height: 769px;
width:50%;
}
.left-go-bottom{
background-color: darkblue;
}
.right-go-top{
background-color: red;
}
#media only screen and (max-width: 768px) {
.left-go-bottom, .right-go-top {
width: 100%;
float: left;
display: block;
}
.both {
flex-direction:column-reverse
}
}
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
EDIT with new code from OP
OPTION 1 : delete the height from .main . because you have set a fixed height of 769px on the mains content ( right and left div ) so .main will inherit the height from the content .
so it will have an automatic height of 769px when right and left div are on the same line , and will have a height of 769px*2 = 1538 on mobile version . this happens automatically if you don't write a fixed height.
see snippet below with this solution
.both {
width: 100%;
display:flex;
}
.main {
display: block;
width: 100%;
/* height:758px removed */
}
.left-go-bottom,.right-go-top {
height: 769px;
width:50%;
}
.left-go-bottom{
background-color: darkblue;
}
.left-go-bottom.green {
background:green
}
.right-go-top{
background-color: red;
}
.right-go-top.yellow{
background-color: yellow;
}
#media only screen and (max-width: 768px) {
.left-go-bottom, .right-go-top {
width: 100%;
float: left;
display: block;
}
.both {
flex-direction:column-reverse;
}
}
<div class="main">
<div class="both">
<div class="left-go-bottom green"></div>
<div class="right-go-top yellow"></div>
</div>
</div>
<div class="main">
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
<div class="main">
<div class="both">
<div class="left-go-bottom green"></div>
<div class="right-go-top yellow"></div>
</div>
</div>
Option B not recommended . but you can set a fixed height on .main , although it's useless because, as i said in the previous solution, .main inherits its height from the two divs that are inside it and that have fixed height of 769px
but if you really want to. you can set height 769px on desktop version, and 1538px when the divs go on different lines. ( their height combined )
see snippet below :
.both {
width: 100%;
display:flex;
}
.main {
display: block;
width: 100%;
height: 769px;
}
.left-go-bottom,.right-go-top {
height: 769px;
width:50%;
}
.left-go-bottom{
background-color: darkblue;
}
.left-go-bottom.green {
background:green
}
.right-go-top{
background-color: red;
}
.right-go-top.yellow{
background-color: yellow;
}
#media only screen and (max-width: 768px) {
.left-go-bottom, .right-go-top {
width: 100%;
float: left;
display: block;
}
.both {
flex-direction:column-reverse;
}
.main {
height: 1538px; /* added */
}
}
<div class="main">
<div class="both">
<div class="left-go-bottom green"></div>
<div class="right-go-top yellow"></div>
</div>
</div>
<div class="main">
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
<div class="main">
<div class="both">
<div class="left-go-bottom green"></div>
<div class="right-go-top yellow"></div>
</div>
</div>
If they don't contain content that can't be doubled, the simplest solution is to create a copy of the right block and hiding or showing it accordingly.
<div class="both">
<div class="right-go-top show-only-on-iPad-portrait"></div>
<div class="left-go-bottom"></div>
<div class="right-go-top hide-on-iPad-portrait"></div>
</div>
<style>
.show-only-on-iPad-portrait {
display:none;
}
.hide-on-iPad-portrait {
display:block;
}
#media only screen and (max-device-width: 1024px) and
(min-device-width: 768px) and (orientation: portrait) {
.show-only-on-iPad-portrait {
display:block;
}
.hide-on-iPad-portrait {
display:none;
}
}
</style>
This is pretty ugly because it uses absolute position and this is not responsive, but this does the staff
#media only screen and (max-device-width: 1024px) and
(min-device-width: 768px) and (orientation: portrait) {
.left-go-bottom, .right-go-top {
width: 100%;
float: left;
display: block;
}
.left-go-bottom{
top: 769px;
position: absolute;
}
.right-go-top{
position: absolute;
top: 0px;
}
}
Thanks to #MihaiT for the help my problem resolved.
This is my answer that works.
code:
<div class="main">
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
<div class="main">
<div class="both unique-flex">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
<div class="main">
<div class="both">
<div class="left-go-bottom"></div>
<div class="right-go-top"></div>
</div>
</div>
css:
.main{
display: block;
width: 100%;
height: 769px;
}
.both {
width: 100%;
display:-webkit-inline-box;
}
.left-go-bottom,.right-go-top {
height: 769px;
width:50%;
}
#media only screen and (max-device-width: 1024px) and
(min-device-width: 768px) and (orientation: portrait) {
.left-go-bottom, .right-go-top {
width: 100%;
float: left;
display: block;
}
.both {
display:block;
}
.main {
float: left;
display: inline-table;
}
div.both.unique-flex {
display: flex;
flex-direction: column-reverse;
}
}
As you can see i made the blocks i want to switch unique to them self and the one on top and bottom used display:block.
I have this code:
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.wrapper {
max-width: 500px;
margin: 0 auto;
background: grey;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}
<section class="wrapper clearfix">
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</section>
DEMO
The container won't wrap around its elements when media query gets activated. The same thing happens with floated children (which is normal, I guess).
Demo
one option is to add an "inner" wrapper; just a wrapper within your wrapper. you can make it display inline-block and set text-align center on the parent wrapper. Finally, remove the grey background from the wrapper and apply to the inner wrapper.
just one drawback is that when you make the window really small the .col divs are not lined up on the left. not sure if that's an issue for you
html
<section class="wrapper clearfix">
<div class='inner-wrap'>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</div>
</section>
css
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.inner-wrap {
display: inline-block;
background: grey;
}
.wrapper {
text-align: center;
max-width: 500px;
margin: 0 auto;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}
I am trying to create rows of links in html+css, the format of which should look like this:
(Psuedocode)
<body class="class_with_minmaxwidth_set_in_css">
<div class="container">
<div class="row">
<div class="fixed_left_40px"></div>
<div class="fluid_center_which_changes_with_window_size"></div>
<div class="fixed_right_40px"></div>
</div>
... repeat more row divs
</div>
</body>
I have tried various combinations of using floats, positions and displays for each of the three divs within, but still am not able to set the right combination. Help will be highly appreciated!
display: table is perfect for this:
DEMO
<div class="container">
<div class="row">
<div class="fixed">40px</div>
<div class="fluid">fluid</div>
<div class="fixed">40px</div>
</div>
</div>
.container {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row div {
display: table-cell;
}
.row div.fixed {
width: 40px;
}
.row div.fluid {
background: lightGreen;
}
If you want to align div elements in a line, use display: inline:block
<div class="row">
<div class="fixed_left_40px"></div>
<div class="fluid_center_which_changes_with_window_size"></div>
<div class="fixed_right_40px"></div>
</div>
CSS:
.row div{
display: inline-block;
height: 40px;
}
.fixed_left_40px{
width: 40px;
background: blue;
}
.fixed_right_40px{
background: red;
width: 40px;
}
Working Fiddle
.row div {
display: inline-block;
}
.row .fixed_left_40px {
float: left;
width: 40px;
}
.row .fixed_right_40px {
float: right;
width: 40px;
}
see http://jsfiddle.net/Bsrur/