I'm having a huge brain fart when trying to center my menu.
I would sincerely appreciate any help someone can offer me.
My menu continues to align on the left but it needs to be centered.
Whenever I put a container around it, I lose my responsive functionality.
Here is my HTML
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./style.css" rel="stylesheet" type="text/css" />
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<div id="header">
<div class="logo"><img src="./images/logo.png"></div>
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Gifts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Home & Lifestyle
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Edible
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Wearable
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Toys & Games
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Blog
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">About Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
☰
</div>
</div>
<!-- END TOP NAV -->
</div>
<!-- END HEADER -->
Here is my CSS
body {
margin:0 auto;
}
.container {
overflow: hidden;
width: 960px;
margin: 0 auto;
}
.logo {
display: block;
color: #000000;
text-align: center;
letter-spacing: .04em;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 40px;
font-weight: 700;
line-height: normal;
padding: 10px 0;
}
.nav-wrap {
overflow: hidden;
width: 100%;
padding: 10px 0;
background: #ffffff;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
text-align:center;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #fff;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #b9b9b9;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .07em;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 19px;
}
/* Add an active class to highlight the current page */
.active {
color: 000;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
color:#b9b9b9;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
text-transform: uppercase;
letter-spacing: .07em;
font-weight: 400;
line-height: 19px;
font-size:inherit;
border: none;
outline: none;
color: #b9b9b9;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: #b9b9b9;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
color: 000;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#333; line-height:20px;}
.thick { font-weight: bold;}
.column {
float: left;
width: 285px;
padding: 15px;
}
.row {
width: 945px;
margin: 0 auto;
text-align: center;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
hr.short {
width: 285px;
height: 1px;
border: none;
background-color: #dedede;
margin-top: 40px;
}
/* Responsive layout */
#media only screen and (max-width: 767px) {
.column {
width: 100%;
padding: 0px;
}
.row {
width: 100%;
margin: 0 auto;
text-align: center;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
}
The menu keeps going to the left (probably the float:left) but I just can't get this to work.
Anyone able to be my hero for the day, please?
You could use flexbox to center your menu:
.topnav {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#media screen and (max-width: 600px) {
.topnav {
justify-content: space-between;
}
.responsive {
flex-direction: column;
}
}
EDIT:
As you were struggling to implement your desired solution despite my suggestions, and as I had some spare time today, I decided to prepare a minimal working example for you. I think you wanted to achieve something like this:
.logo-placeholder {
width: 50px;
height: 30px;
margin: auto;
background-color: red;
margin-bottom: 10px;
}
.content {
margin: 20px 100px 0 100px;
padding: 20px;
background-color: #EEE;
}
.header-navigation {
position: sticky;
top: 0;
padding: 5px;
background-color: #CCC;
}
.navigation {
display: flex;
justify-content: space-around;
list-style: none;
}
.subnavigation {
display: none;
}
.navigation-item {
position: relative;
}
.navigation-item:hover > .subnavigation {
display: block;
position: absolute;
list-style: none;
padding: 10px;
background-color: #EEE;
}
<div class="logo-placeholder"></div>
<nav class="header-navigation">
<ul class="navigation">
<li class="navigation-item">
Top Nav Item 1
<ul class="subnavigation">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li class="navigation-item">
Top Nav Item 2
<ul class="subnavigation">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li class="navigation-item">
Top Nav Item 3
<ul class="subnavigation">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
<li class="navigation-item">
Top Nav Item 4
<ul class="subnavigation">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
</ul>
</li>
</ul>
</nav>
<article class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Sin laboramus, quis est, qui alienae modum statuat industriae? <b>Duo Reges: constructio interrete.</b> Idem iste, inquam, de voluptate quid sentit? Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. <b>Maximus dolor, inquit, brevis est.</b> </p>
<p><i>Non est igitur summum malum dolor.</i> <i>Sed haec omittamus;</i> Quia nec honesto quic quam honestius nec turpi turpius. Quid Zeno? </p>
<p>Eiuro, inquit adridens, iniquum, hac quidem de re; An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Cenasti in vita numquam bene, cum omnia in ista Consumis squilla atque acupensere cum decimano. At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare. </p>
<p>Nam si beatus umquam fuisset, beatam vitam usque ad illum a Cyro extructum rogum pertulisset. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. Eam tum adesse, cum dolor omnis absit; An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? </p>
<p>Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. Immo istud quidem, inquam, quo loco quidque, nisi iniquum postulo, arbitratu meo. <i>Sed nunc, quod agimus;</i> Aliter homines, aliter philosophos loqui putas oportere? Universa enim illorum ratione cum tota vestra confligendum puto. Sed potestne rerum maior esse dissensio? An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? <b>Quod quidem nobis non saepe contingit.</b> Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. </p>
<p>Sed quid attinet de rebus tam apertis plura requirere? Claudii libidini, qui tum erat summo ne imperio, dederetur. <i>Et ille ridens: Video, inquit, quid agas;</i> <b>Hoc est non dividere, sed frangere.</b> Tu enim ista lenius, hic Stoicorum more nos vexat. <b>Quid iudicant sensus?</b> Facile est hoc cernere in primis puerorum aetatulis. Sit enim idem caecus, debilis. Tum ille timide vel potius verecunde: Facio, inquit. <i>Comprehensum, quod cognitum non habet?</i> </p>
<p>Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Aliter enim nosmet ipsos nosse non possumus. Re mihi non aeque satisfacit, et quidem locis pluribus. Scio enim esse quosdam, qui quavis lingua philosophari possint; Familiares nostros, credo, Sironem dicis et Philodemum, cum optimos viros, tum homines doctissimos. </p>
<p>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Murenam te accusante defenderem. Cupiditates non Epicuri divisione finiebat, sed sua satietate. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; <b>Quae cum essent dicta, discessimus.</b> Quod maxime efficit Theophrasti de beata vita liber, in quo multum admodum fortunae datur. </p>
<p>Zenonis est, inquam, hoc Stoici. Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. <i>Aliter enim nosmet ipsos nosse non possumus.</i> Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Quid enim est a Chrysippo praetermissum in Stoicis? Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. <i>Qui ita affectus, beatum esse numquam probabis;</i> Itaque si aut requietem natura non quaereret aut eam posset alia quadam ratione consequi. </p>
<p>Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Multoque hoc melius nos veriusque quam Stoici. Est enim effectrix multarum et magnarum voluptatum. <b>Nihilo beatiorem esse Metellum quam Regulum.</b> Nos autem non solum beatae vitae istam esse oblectationem videmus, sed etiam levamentum miseriarum. </p>
<p>Quaerimus enim finem bonorum. Tenent mordicus. At iam decimum annum in spelunca iacet. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? </p>
<p>Cum audissem Antiochum, Brute, ut solebam, cum M. Summum ením bonum exposuit vacuitatem doloris; Aliis esse maiora, illud dubium, ad id, quod summum bonum dicitis, ecquaenam possit fieri accessio. Et ille ridens: Video, inquit, quid agas; Sed fortuna fortis; Facillimum id quidem est, inquam. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Sic enim maiores nostri labores non fugiendos tristissimo tamen verbo aerumnas etiam in deo nominaverunt. Quod autem ratione actum est, id officium appellamus. <b>Sin aliud quid voles, postea.</b> </p>
</article>
As my account is fairly new, I couldn't comment, but here it is anyway:
ajobi posted a nice solution and that is a great one for 2D rows of elements. You should take a look at CSS Grid as well. It does basically the same as Flexbox, but in 3 dimensions.
Related
I want to create equal height items inside a column. It's easy when i only have the title and price. The i can just flex grow the title, and i go my equal height.
The issue is when i also have a description.
Title
Price
Desc
There are two example, because i've tried both.
One example with all content inside one item, and the another example where the content is splittet into two item.
I've a equal height jQuery script, but want to use Flex if possible.
There's colors on all elements to see if the have equal heights.
I've my code on codepen, but i'll paste it in here also.
* {
box-sizing: border-box;
}
.container {
background: tomato;
padding: 20px;
max-width: 600px;
margin: auto;
}
.container:not(:first-of-type) {
margin-top: 40px;
}
.container ul {
margin: unset;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.container ul li {
display: flex;
flex-direction: column;
width: 32%;
background: #fff;
padding: .3em;
}
.container ul li h2 {
margin: 0;
}
.container.one ul li a {
background: lightgreen;
}
.container.one ul li a h2, .container.one ul li a p {
background: pink;
}
.container.one ul li a span {
background: lightblue;
}
.container.one .loop--item * {
display: flex;
flex-direction: column;
}
.container.one .loop--item--product-link {
height: 100%;
}
.container.one .loop--item--product-link h2 {
flex: 1;
}
.container.two .title-price {
background: green;
}
.container.two .desc {
background: blue;
}
.container.two ul li a {
background: lightgreen;
}
.container.two ul li a h2, .container.two ul li a p {
background: pink;
}
.container.two ul li a span {
background: lightblue;
}
.container.two .loop--item--product-link {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.container.two .loop--item--product-link div.title-price {
padding: 10px;
display: flex;
flex-direction: column;
flex: 1;
}
.container.two .loop--item--product-link div.title-price h2 {
flex: 1;
}
.container.two .loop--item--product-link div.desc {
padding: 10px;
}
<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>
<!-- Container ONE -->
<div class="container one">
<h1>Content in same box</h1>
<ul class="loop">
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift som er lidt længere</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift </h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
</ul>
</div>
<!-- Container TWO -->
<div class="container two">
<h1>Content in two boxes</h1>
<ul class="loop">
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<div class="title-price">
<h2>Overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
</div>
<div class="desc">
<p>Lorem ipsum dolor, sit amet consectetit maiores!</p>
</div>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<div class="title-price">
<h2>Her er en overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
</div>
<div class="desc">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</div>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<div class="title-price">
<h2>Her er en overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
</div>
<div class="desc">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad</p>
</div>
</a>
</li>
</ul>
</div>
As Paulie_D says, there is no way in the CSS to do it unless the elements share a parent.
In modern browsers, however, you can flatten your DOM tree, and make some elements disappear using display: contents.
One posible solution using this approach (getting rid of li and a)
* {
box-sizing: border-box;
}
.container {
background: tomato;
padding: 20px;
max-width: 600px;
margin: auto;
}
.container:not(:first-of-type) {
margin-top: 40px;
}
.container ul {
margin: unset;
padding: 0;
list-style-type: none;
display: grid;
grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(3, auto);
grid-gap: 10px;
}
.container ul li,
.container ul li a {
display: contents;
}
.container ul li h2 {
margin: 0;
}
.container.one ul li a h2 {
grid-row: 1;
background: pink;
}
.container.one ul li a p {
grid-row: 3;
background: pink;
}
.container.one ul li a span {
grid-row: 2;
background: lightblue;
}
<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>
<!-- Container ONE -->
<div class="container one">
<h1>Content in same box</h1>
<ul class="loop">
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift som er lidt længere</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift </h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
</ul>
</div>
I have the following CSS setting:
My modal is a percentage of the body:
p-dialog.inViewer .ui-dialog {
width: 95%;
height: 95%;
overflow: hidden !important;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.42857143;
}
in the modal there is a floating div with the height that changes according the contents. The contents is scrollable so I am trying to set the height of the floating div so it is always contained in the modal.
So far I have the following CSS for the floating div:
p-dialog.inViewer p-tree.parts .ui-widget-content {
border-style: none;
background: rgba(255, 255, 255, 0)!important;
max-height: 44vh;
width: 100%;
overflow: scroll;
}
but this is only working for big screen. I understand the problem is that I am defining the max-height based on a paren with height expressed as percentage. Do you know how can I achieve the desired layout? I need to have the modal centred in the screen and 95% of windows height and width.
Thank you for your help, Dino.
You could do something like that :
body {
margin: 0px;
padding: 0px;
}
.modal {
width: calc(90vw - 80px);
height: calc(90vh - 80px);
overflow: hidden !important;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.42857143;
background-color: red;
padding: 40px;
margin: 0 auto;
margin-top: 5vh;
}
.floating {
padding: 20px;
border-style: none;
width: calc(100% - 40px);
overflow: hidden;
background-color: blue;
color: white;
min-height: calc(90vh - 120px);
max-height: calc(90vh - 120px);
overflow-y: scroll;
}
p {
margin: 0px;
margin-bottom: 20px;
}
<div class="modal">
<div class="floating">
<p>Hoc inmaturo interitu ipse quoque sui pertaesus excessit e vita aetatis nono anno atque vicensimo cum quadriennio imperasset. natus apud Tuscos in Massa Veternensi, patre Constantio Constantini fratre imperatoris, matreque Galla sorore Rufini et Cerealis, quos trabeae consulares nobilitarunt et praefecturae.</p>
<p>Verum ad istam omnem orationem brevis est defensio. Nam quoad aetas M. Caeli dare potuit isti suspicioni locum, fuit primum ipsius pudore, deinde etiam patris diligentia disciplinaque munita. Qui ut huic virilem togam deditšnihil dicam hoc loco de me; tantum sit, quantum vos existimatis; hoc dicam, hunc a patre continuo ad me esse deductum; nemo hunc M. Caelium in illo aetatis flore vidit nisi aut cum patre aut mecum aut in M. Crassi castissima domo, cum artibus honestissimis erudiretur.</p>
<p>Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.</p>
<p>Pandente itaque viam fatorum sorte tristissima, qua praestitutum erat eum vita et imperio spoliari, itineribus interiectis permutatione iumentorum emensis venit Petobionem oppidum Noricorum, ubi reseratae sunt insidiarum latebrae omnes, et Barbatio repente apparuit comes, qui sub eo domesticis praefuit, cum Apodemio agente in rebus milites ducens, quos beneficiis suis oppigneratos elegerat imperator certus nec praemiis nec miseratione ulla posse deflecti.</p>
<p>Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.</p>
</div>
</div>
I have two divs side by side. The div on the left side is a basic navigation. The div on the right is an article. I want the div on the left to be the height of the viewport and the div on the right to hide anything that longer than the div on the left (the end goal is to have a stick side bar that takes up 1/3 of the screen). I’ve considered using flexbox, but haven’t used it before and wasn’t sure if this is the best method to go.
I tried setting the height of the left div to 100vh as suggested in this article: Make div 100% height of browser window but it didn’t work. I’ve seen suggestions regarding using tables but would prefer avoiding them. I’ve seen some suggestions regarding using jquery and having the right div resize itself based on the left, but this seems a little more complex then necessary.
Note: Most articles I've seen about matching div heights seems geared toward making the smaller div match the height of the larger. My issues is the opposite. I want the larger div to match the height of the smaller one and hide any extra content.
However I’m open to any suggestions.
<doctype="HTML">
<html>
<head>
<title>Web Hosting Issues</title>
<style>#import url('https://fonts.googleapis.com/css?family=Open+Sans');
</style>
</head>
<body>
<header>
<div id="logo">
<a href="home">
<h1>Website</h1>
<img>
</a>
</div>
<navigation>
<ul>
<div class="nav-row">
<li id="site-down">
<a href="site-down-url">
<img>Site Down
</a>
</li>
<li id="wordpress">
<a href="wordpress-url">
<img>Wordpress
</a>
</li>
</div>
<div class="nav-row">
<li id="migrations">
<a href="migrations-url">
<img>Migrations
</a>
</li>
<li id="backups">
<a href="backups-url">
<img>Backups
</a>
</li>
</div>
<div class="nav-row">
<li id="databases">
<img>Databases
</a>
</li>
<li id="domains">
<a href="domains-url">
<img>Domain
</a>
</li>
</div>
</ul>
</navigation>
<div id="contact-us">
<a href="contact-form">
<img>
<div>
<h2>Have Us Fix It</h2>
<button id="contact-button">Contact Us</button>
</div>
</a>
</div>
</header>
<article>
<h1>Article Title</h1>
<p>Lorem ipsum dolor sit amet, mei hinc graeci vituperatoribus et. Pri stet copiosae mediocrem eu. Mollis inimicus mel id, mutat mentitum vix an. No pro virtute intellegam, ea has epicurei referrentur, posse oporteat ius ei.</p>
<p>Libris appellantur et pro. Insolens ocurreret salutatus et sit. Mei ea aeque ludus aliquando, at hinc ponderum comprehensam cum. Eu nam mandamus expetenda dissentiunt, probo tacimates at eos, no everti docendi sed. Id appetere democritum nam.</p>
<p>Odio animal aperiam ea sit. Debet accumsan ne pro, eos simul perfecto invenire ea. Per ea quaestio consulatu. Eos vide repudiare id, mei cu ridens possim assentior, te probo intellegat vim. Has etiam incorrupte an. Id oratio verear audire mei, reque tincidunt duo ex.</p>
<p>Eum erant putant vocent ei. At dico exerci quo. Pri melius ocurreret persequeris in, eu noster virtute est. Aeque commodo ut duo. In sit melius dignissim, te has lorem minimum consectetuer.</p>
<p>Pri oratio vocibus vituperatoribus te, dolores persecuti sit ut. Esse munere eam ea, possim mentitum moderatius nec at. Doming gubergren ut mei, luptatum salutatus scriptorem mei an. Nec partem ponderum assueverit cu, veri erat libris his ad, ad vidisse docendi ius. At everti dolores disputationi vel, nec cu diceret eleifend. Pri cu falli erant, tamquam democritum ad sit, vis illum inani in. Apeirian nominati sed at, ei atomorum accommodare usu, has modus definitionem te.</p>
</article>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
display: flex;
}
img {
max-width: 100%;
display: block;
margin: auto;
}
header {
float: left;
width: 50%;
}
header a {
text-decoration: none;
}
#logo, #contact-us {
background: #074f7b;
padding: 0.5em;
}
#logo h1 {
display: inline-block;
text-align: center;
font-family: sans-serif;
color: white;
float: left;
width: 68%;
}
#logo img {
float: left;
width: 30%;
padding-left: .4em;
color: white;
}
#logo::after{
content: " ";
display: block;
height: 0;
clear: both;
}
navigation {}
navigation:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
navigation ul {
margin: 0;
padding: 0;
}
.nav-row {}
.nav-row li {
width: 50%;
float: left;
display: inline-block;
min-height: 100px;
}
.nav-row a {
display: block;
padding: .5em;
text-align: center;
color: black;
}
.nav-row a:hover {
color: white;
}
#site-down {
background: #ffc219;
}
#wordpress {
background: #8f73b4;
}
#migrations {
background: #0778bb;
}
#backups {
background: #f06f26;
}
#databases {
background: #764821;
}
#domains {
background: #59bb53;
}
#contact-us h1, #contact-us img{
color: white;
}
#contact-us {
text-align: center;
}
#contact-us img {
float: left;
width: 45%;
text-align: center;
padding: 0 .5em
}
#contact-us div {
width: 50%;
float: left;
text-align: center;
}
#contact-us h2 {
color: white;
margin: 0em 0em .5em 0em;
padding-left: 0.625em
}
#contact-us::after{
content: " ";
display: block;
height: 0;
clear: both;
}
#contact-us button {
background: #8f73b4;
border-radius: .6em;
border: 1px solid #8f73b4;
color: white;
}
article {
float: right;
width: 50%;
}
article h1, article p {
margin: 1.563em;
}
article h1 {
text-align: center;
}
You could simply position:fixed; your left menu:
/*QuickReset*/*{box-sizing:border-box; margin:0;}html,body{height:100%;}
#menu{
position:fixed;
background: #8F73B4;
height:100%;
width: 33.333%;
}
#page{
margin-left:33.333%; /* matches the menu width */
height: 2000px; /* test: just to add scrollbars */
}
<div id="menu"> MENU BOXES HERE </div>
<div id="page"> PAGE CONTENT HERE </div>
Than for the menu elements/boxes I'd go with flexbox
JSBin demo
/*QuickReset*/
*{box-sizing:border-box;margin:0;}
html,body{height:100%;font:14px/1.4 sans-serif;}
.flex-col{
display: flex;
flex-flow: column wrap;
}
.flex-row{
display: flex;
flex-flow: row wrap;
}
.grow{
flex: 1;
}
img{
max-width:100%;
vertical-align:top;
}
#menu{
position:fixed;
background: #8F73B4;
height:100%;
width: 33.333%;
}
#page{
margin-left:33.333%; /* matches the menu width */
height: 2000px; /* test: just to add scrollbars */
}
<div id="menu" class="flex-col">
<header>header</header>
<div class="flex-row grow">
<div class="grow">1</div>
<div class="grow">2</div>
</div>
<div class="flex-row grow">
<div class="grow">3</div>
<div class="grow">4</div>
</div>
<footer>footer</footer>
</div>
<div id="page">
<h1>PAGE CONTENT HERE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At recusandae explicabo numquam molestiae, debitis eius deserunt cum necessitatibus aspernatur. Excepturi omnis, tenetur nihil voluptatibus hic incidunt doloribus itaque delectus dolorum!</p>
</div>
P.S: <navigation> is not a HTML5 element. You probably want to use <nav> for your semantic.
I want to float an image in that way it slides out of the div. I have even added the negative margin for the image but what is happening is that the iPhone image is getting truncated all the time.
I have tried to include the height and width of the image as well but nothing is working.
Please help.
.blue-wrapper {
background: #41A7D3;
width: 100%;
overflow: hidden;
}
.blue {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.blue-left {
float: left;
width: 39%;
}
.blue-left img {
display: block;
margin-top: -100px;
width: 380px;
height: 739px;
}
.blue-right {
float: right;
width: 61%;
color: #FFFFFF;
}
<div class="blue-wrapper">
<div class="blue">
<div class="blue-left">
<img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone">
</div>
<!-- Blue Left -->
<div class="blue-right">
<div class="blue-text">
<h2>What ComeAgain Can Do for Your Business</h2>
<p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea. Ea utamur persecuti vis. Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas. Ut legere vocibus fierent nec, ei dicit
everti patrioque sed. Mel verear impetus et, fugit vocent ut nam.
</p>
<h3>How ComeAgain Works</h3>
<ul>
<li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li>
<li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li>
</ul>
</div>
<!-- Blue Text -->
<div class="blue-button">
Get Registered
</div>
<!-- Blue Button -->
</div>
<!-- Blue Right -->
</div>
<!-- Blue -->
</div>
<!-- Blue Wrapper -->
.blue-wrapper {
background: #41A7D3;
width: 100%;
}
.blue {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.blue-left {
float: left;
width: 39%;
position: relative;
}
.blue-left img {
display: block;
top: 100px;
width: 380px;
height: 739px;
position: absolute;
}
.blue-right {
float: right;
width: 61%;
color: #FFFFFF;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<div class="blue-wrapper clearfix">
<div class="blue">
<div class="blue-left">
<img src="https://feverweb.s3.amazonaws.com/landing/images/iphone-white.png" alt="3rd iPhone">
</div><!-- Blue Left -->
<div class="blue-right">
<div class="blue-text">
<h2>What ComeAgain Can Do for Your Business</h2>
<p>Lorem ipsum dolor sit amet, id sonet conclusionemque mel, denique nominavi instructior at mea.
Ea utamur persecuti vis.
Omnes perfecto menandri est ut, quot nonumy vix at. Et vix vocent corrumpit definiebas.
Ut legere vocibus fierent nec, ei dicit everti patrioque sed. Mel verear impetus et, fugit vocent ut nam.
</p>
<h3>How ComeAgain Works</h3>
<ul>
<li>You always get a Reward with your 1st Purchase at any ComeAgain Location!</li>
<li>Then ComeAgain… when you fill up a Rewards Card, you get a Free Reward!</li>
</ul>
</div><!-- Blue Text -->
<div class="blue-button">
Get Registered
</div><!-- Blue Button -->
</div><!-- Blue Right -->
</div><!-- Blue -->
</div><!-- Blue Wrapper -->
For the background you should add a .clearfix on the wrapper.
I'm working on a horizontal scrolling website and I'm trying to align 2 divs with columns of text.
I can't manage to align these 2 divs (the second one is at the bottom left of the first one) and some of the columns are outside the div.
How can I resolve this?
HTML:
<body>
<div id="main">
<div id="content">
<div id="article"><!-- columns of text --></div>
<div id="comments"><!-- columns of text --></div>
</div>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
color: white;
background: transparent;
}
#main {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
#content {
overflow-x: scroll;
overflow-y: auto;
height: 100%;
top: 0;
left: 0;
background: black;
}
#article {
border: 10px solid yellow;
float: left;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
font-size: 25px;
text-align: left;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-width: 300px;
column-gap: 40px;
background: green;
}
#comments {
border: 10px solid red;
float: left;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
font-size: 25px;
text-align: left;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-width: 300px;
column-gap: 40px;
background: blue;
}
Here is the JSFiddle demo : http://jsfiddle.net/kz5ch49w/54/
<body>
<div id="main">
<div id="content">
<div id="article"><!-- columns of text --></div>
<div id="comments"><!-- columns of text --></div>
</div>
</div>
</body>
css:
body { margin:0; padding:0; color:white; background:transparent;width:auto }
div { position:absolute;margin:1%;}
Use absolute position and calculate width and left position serially. So you can use horizontal scrolling. Eg : http://jsfiddle.net/kz5ch49w/57/
Try this. It makes each box have equal width (by the 50% width defined in the CSS) and you can change 2000px to whatever screen size you want. I made it 2000px on my test to give me a reason to scroll and because 2000 exceeds my screen width.
<html>
<title>x</title>
<head>
<style>
body { margin:0; padding:0; color:white; background:transparent; }
#main {width:2000px;}
#article {border:10px solid yellow; float:left; width:50%; height:100%; box-sizing: border-box; font-size:25px; text-align:left; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; column-width: 300px; column-gap: 40px; background:green; }
#comments {border:10px solid red; float:right; width:50%; height:100%; box-sizing: border-box; font-size:25px; text-align:left; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; column-width: 300px; column-gap: 40px; background:blue; }
</style>
</head>
<body>
<div id="main">
<div id="article"><p>dsgkhskgshgk</p><p>dkjghskgdhskgh</p></div>
<div id="comments"><p>dsgkhskgshgk</p><p>dkjghskgdhskgh</p></div>
</div>
</body>
</html>
I update your jsfiddle where I changed CSS properties. like position , height , width.
http://jsfiddle.net/kz5ch49w/58/
As your 62 jsfiddle:- I update fiddle :- http://jsfiddle.net/kz5ch49w/64/
Check for the responsive by changing browser or fiddle height, width or add or modify content.
what you need to do, never give hardcore height , width. you can give 50% width , float:left for both div when you want horizontally set. or you can set width 33% of 3 div, if you wish to set horizontally. means your div will set in 100% width by-default, you can set float left will set to left and width will use for its content.
As your requirement never use position and -moz... (this is default add by mozila browser), each browser have its own content properties, when we not give anything, every browser add properties itself which same properties may you not get in another browser.
Give always % based height width for responsive, never though about content height, it will automatically scroll down if you give % width or not give the width(in this case it take browser width or parent div width(if you given)).
I think, I explain you better.
Update HTML
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
color: white;
background: transparent;
}
#main {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
#content {
overflow-x: scroll;
overflow-y: auto;
height: 100%;
top: 0;
left: 0;
background: black;
}
#article {
border: 10px solid yellow;
float: left;
width: 50%;
/*height: 100%;
position: relative;*/
box-sizing: border-box;
font-size: 25px;
text-align: left;
/*-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-width: 300px;
column-gap: 40px;*/
background: green;
}
#comments {
border: 10px solid red;
float: left;
width: 50%;
/*height: 100%;
position: relative;*/
box-sizing: border-box;
font-size: 25px;
text-align: left;
/*-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-width: 300px;
-moz-column-gap: 40px;
column-width: 300px;
column-gap: 40px;*/
background: blue;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<div id="article">
<p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>
<p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>
<p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>
<p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>
<p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.</p>
<p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>
<p>Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</p>
<p>Figgeri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.</p>
</div>
<div id="comments">
<p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia) querebatur, quod omnibus in rebus homines diligentiores essent; capras et oves quot quisque haberet, dicere posse, amicos quot haberet, non posse dicere et in illis quidem parandis adhibere curam, in amicis eligendis neglegentis esse nec habere quasi signa quaedam et notas, quibus eos qui ad amicitias essent idonei, iudicarent. Sunt igitur firmi et stabiles et constantes eligendi; cuius generis est magna penuria. Et iudicare difficile est sane nisi expertum; experiendum autem est in ipsa amicitia. Ita praecurrit amicitia iudicium tollitque experiendi potestatem.</p>
<p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>
<p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix interneciva aegre vestigia claritudinis pristinae monstrat admodum pauca.</p>
<p>Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?</p>
<p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.</p>
<p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>
<p>Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</p>
<p>Figgeri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? cum praesertim illa perdiscere ludus esset. Quam ob rem dissentientium inter se reprehensiones non sunt vituperandae, maledicta, contumeliae, tum iracundiae, contentiones concertationesque in disputando pertinaces indignae philosophia mihi videri solent.</p>
</div>
</div>
</div>
</body>
</html>
Make the following changes to your CSS. This will align the two divs horizontally with respect to each other:
CSS:
#main {
left: 0;
position: relative;
top: 0;
}
#content {
background: none repeat scroll 0 0 black;
left: 0;
overflow-x: scroll;
top: 0;
width: 100%;
}
#article {
background: none repeat scroll 0 0 green;
border: 10px solid yellow;
box-sizing: border-box;
float: left;
font-size: 25px;
height: 100%;
position: relative;
text-align: left;
width: 50%;
}
#comments {
background: none repeat scroll 0 0 blue;
border: 10px solid red;
box-sizing: border-box;
float: left;
font-size: 25px;
position: relative;
text-align: left;
width: 50%;
}
This is similar to another question I answered, except the other person had 3 divs he wanted horizontally aligned.
Your options are:
Add this to your css:
#articles,#comments {display: inline-block;}
Change the inner-most divs to spans and add this to your CSS:
#articles, #comments {display: block;}