This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
Closed 3 years ago.
Nothing does the job for me. I've got two problems here:
White space from parent div between child divs colored in blue.
screenshot
White space from body in bottom of the page dispite the colored in yellow.
screenshot
The margin; 0; does the job but leaves me the mysterious white space colored in yellow at the bottom. I don't understand why yet.
Thank you for reading me! :-)
body
{
background-color: yellow;
margin: 0;
}
.parent
{
background-color: blue;
}
.enfant-un
{
background-color: orange;
height: 120px;
padding-left: 10%;
padding-right: 10%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px;
}
.logo
{
width: 90px;
}
.logo:hover
{
opacity: 0.75;
}
.menu
{
}
.menu li
{
display: inline;
padding-right: 10px;
}
.menu li:hover
{
opacity: 0.75;
}
.illustration
{
width: 100%;
border-radius: 6px;
}
.enfant-deux
{
background-color: green;
}
.enfant-trois
{
background-color: red;
}
.enfant-quatre
{
background-color: violet;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>GBAF(Groupement Banque-Assurance Français)</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
</head>
<body>
<div class="parent">
<div class="enfant-un child">
<a href="index.php">
<img class="logo" src="images/logo.png" title="Acceuil" alt="Le logo de GBAF(Groupement Banque-Assurance Français)." />
</a>
<nav class="menu">
<?php
$autorisation = false;
if ($autorisation)
{
echo "$nom $prenom";
}
else
{
?>
<ul>
<li>Inscription</li>
<li>Connexion</li>
</ul>
<?php
}
?>
</nav>
</div>
<div class="enfant-deux child">
<h1>Groupement Banque-Assurance Français</h1>
<p>Présentation des partenaires</p>
<img class="illustration" src="images/illustration.jpg" alt="Bureaux de GBAF(Groupement Banque-Assurance Français)."/>
</div>
<div class="enfant-trois child">
<h2>Acteurs et partenaires</h2>
<p>Présentation des acteurs et partenaires</p>
<div class="acteur">
<img src="images/logo-acteur-1.png" alt="Acteur 1"/>
<h3>Acteur 1</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-2.png" alt="Acteur 2"/>
<h3>Acteur 2</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-3.png" alt="Acteur 3"/>
<h3>Acteur 3</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-4.png" alt="Acteur 4"/>
<h3>Acteur 4</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-5.png" alt="Acteur 5"/>
<h3>Acteur 5</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
<div class="acteur">
<img src="images/logo-acteur-6.png" alt="Acteur 6"/>
<h3>Acteur 6</h3>
<p>Description + lien</p>
<button href="#" class="lirelasuite">Lire la suite</button>
</div>
</div>
<div class="enfant-quatre child">
<nav class="menu">
<ul>
<li>Mentions légales</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
The margin properties on the h and ul tags were causing the spacing issue. I added the following and removed the unwanted spaces. fiddle: https://jsfiddle.net/fneqm28b/2/
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
.menu ul {
margin-bottom: 0;
margin-top: 0;
}
Related
I have this simple layout. Not sure why the media screen for mobile overwrite my main css. At laptop size, it shows orange color and at mobile size is show yellow color.
/* main container */
#resume {
padding: 1rem;
margin-top: 2rem;
background-color:silver;
}
.parent {
display: flex;
flex-flow: column nowrap;
background-color:yellow;
}
/****************
* PHONE
****************/
#media screen and (min-width: 460px) {
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
background-color:orange;
}
.topper {
order: -1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> http://richardhendricks.com
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> richard#valley.com
</div>
<div class="phone">
<span class="fa fa-mobile"></span> (912) 555-4321
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url">dandymusicnl</span>
</div>
</div>
</div>
</header>
</div>
<div class="child topper">
2
</div>
</div>
</div>
</body>
</html>
I think CSS for mobile screen shall set MAX-width instead of min-width. Try:
#media screen and (max-width: 460px)
The above CSS applies when the screen is narrower than 460px.
Because both your code works on desktop and you media query is under in the file so it's executed after
Try this one
/* main container */
/****************
* PHONE
****************/
#resume {
width: 95%;
margin: 0px auto;
}
.display {
max-width: 180px;
}
.child {
flex: 100%;
background-color:orange;
}
.topper {
order: -1;
}
#media screen and (max-width: 460px) {
#resume {
padding: 1rem;
margin-top: 2rem;
background-color: silver;
}
.parent {
display: flex;
flex-flow: column nowrap;
background-color: yellow;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<title>Steve</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="resume">
<div class="parent">
<div class="child wider">
<header class="clear" id="header">
<div>
<h1 class="name">Steve</h1>
<h2 class="label">Programmer</h2>
</div><span class="location"><span class="address">2712 Broadway St,</span> <span class="postalCode">CA 94115,</span> <span class="city">San Francisco,</span> <span class="region">California</span> <span class="countryCode">US</span></span>
<div id="contact">
<div class="website">
<span class="fa fa-external-link"></span> http://richardhendricks.com
</div>
<div class="email">
<span class="fa fa-envelope-o"></span> richard#valley.com
</div>
<div class="phone">
<span class="fa fa-mobile"></span> (912) 555-4321
</div>
</div>
<div id="profiles">
<div class="item">
<div class="username">
<span class="fa fa-twitter twitter social"></span> <span>neutralthoughts</span>
</div>
</div>
<div class="item">
<div class="username">
<span class="fa fa-soundcloud soundcloud social"></span> <span class="url">dandymusicnl</span>
</div>
</div>
</div>
</header>
</div>
<div class="child topper">
2
</div>
</div>
</div>
</body>
</html>
Whenever user decreases the window size the text changes according to the window size. But when I decrease the window size it goes over to the image. I tried media queries but It always shows the same. I used the VW and vh to resize according to the window size.
I am getting like this. How to solve that error. The media query I used is
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
How to solve that .
My code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Passion One' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Palanquin Dark' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
}
.carousel-control.right, .carousel-control.left {
background-image:none;
color: #32CD32;
}
.carousel-indicators li {
border-color: #000000;
}
.carousel-indicators li.active {
background-color: #32CD32;
}
.button {
background-color:#000000;
border:black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
/*.text {
font-size: 160%;
position: absolute;
display: inline-block;
left: 50%;
top: 180%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}*/
.button1 {
border: 1px solid black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
#media screen and (max-width: 803px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
img {
width:100%,
height:auto;
}
.col-sm-8 {
padding: 60px 50px;
}
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
/*#media screen and (max-width: 500px) {
.text {
font-size: 70px;
}*/
/*#media screen and (max-width:760em) {
.img {
font-size: 150px;
}*/
#media screen and (max-width: 803em) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style = "background:#FFFFFF">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <img src="Assets/img/deyapayiconandroid#3x.png" alt="logo" style="width:60px;"><br> -->
<h1 style = "font-family:Passion One;color:#3393E7;">deyaPay</h1>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li> Login</li>
</ul>
</div>
</div>
</nav>
<div class = "container-fluid" style = "background:#FFFFFF ">
<div class = "row">
<div class="col-sm-8">
<h2 style="margin-top: 100px; margin-left:50px;font-family:Palanquin Dark; font-size:55px" >
Pay for it anyway you want</br>
with deyaPay </h2>
<button type = "button" style = "background-color:#4CAF50; font-size:20px;width:200px;height:40px;margin-left:50px;margin-top:20px;text-align=center;color:white;border:none;display:inline-block"> Get Started </button>
</div>
<div class="col-sm-4">
<img src="Assets/img/deywalletbg.png" class="img-responsive" width="300" height="250" style=" margin-top: 150px">
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-color: #F2F2F2">
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-4">
<img src="Assets/img/first.png" class="img-responsive" width="300" height="250" style=" margin-left:180px;margin-top: 40px;">
</div>
<div class="col-sm-8">
<h2 class = "text" style = " font-family: 'Fira Sans Extra Condensed';font-size:3vw;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<div class="item" style="background-color: #F2F2F2">
<div class="row">
<div class="col-sm-4">
<img src="Assets/img/slide2.png" class="img-responsive" width="450" height="250" style=" margin-left:100px;margin-top: 40px;">
</div>
<div class = "col-sm-8">
<h2 style = " font-family: 'Fira Sans Extra Condensed';font-size:35px;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid" style="background-color:#F0F8FF ">
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" class = "img-circle" alt="Paris" width="180">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="New York" width="180">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="San Francisco" width="180">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
</div>
The image is overlapped because it has a margin to the left as inline style. You could remove that inline style and use a media query to overwrite that. Take care that your text also has inline style which might cause problems, as you wont be able to overwrite it with media query.
Additionally, your second slide doesn't has the .text class on it, if you wonder that only one slides text changes.
The content from my html document is overlapping my navbar.
I have tried to add margins to my .main-nav in css but it did not work.
The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
margin-top: 200px;
}
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
use clear:both; on section-test class
/* Styles go here */
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
</html>
As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.
You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!
.row {
display: flex;
}
.main-nav{
text-align: right;
flex: 1;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section>
<h3>hello world</h3>
</section>
I have commented out the bug(with #characters) in the navigation part of the code where I am getting the issue. Try removing the .navbar-brand as mentioned in the comment and you will get to see.
I'm curious to know that what's happening under the hood when navbar-brand is assigned to its(element with .nav-tabs) adjacent element which conflicting with it
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="author" content="NeelDUnstoppable" />
<meta name="description" content="A rough template for html page created just for enhancing and getting a precise grip over the rules" />
<title>html template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="nav" role="navigation">
<!-- ######## Remove the .navbar-brand class from the below <a> element and the .nav-tabs class in <ul> element works completely fine ######### -->
Blasting off with bootstrap
<ul class="nav nav-tabs">
<li role="presentation" class="active">Tickets</li>
<li role="presentation">Stations</li>
<li role="presentation">About</li>
</ul>
</div>
<div class="container">
<div class="row well well-lg">
<div class="col-md-6">
<h2>The Fastest way to space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button type="button" class="btn btn-lg btn-default">Take the Tour</button>
<button type="button" class="btn btn-lg btn-primary">Book Tickets Now</button>
</div>
<div class="col-md-6 hidden-sm hidden-xs">
<img src="images/img-header.jpg" alt="Blasting off" title="Blasting off image"/>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase"></i>
<h3>Book Today</h3>
<p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around teh globe to service everyone</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-random"></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-send"></i>
<h3>RocketBus®</h3>
<p>For cheapest fares, catch the next RocketBus® to the stars. Cheaper on you wallet, and easiest way to make friends</p>
</div>
</div>
</div>
<div class='footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-4 col-md-3 col-xs-6'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='#'>Book your ticket today</a>!</p>
<p><a href='#'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
</div>
<div class='col-sm-2 col-xs-6 col-md-offset-1'>
<h4>Links</h4>
<ul class='list-unstyled'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tickets</a></li>
<li><a href='#'>Stations</a></li>
</ul>
</div>
<div class='clearfix visible-xs'></div>
<div class='col-sm-2 col-xs-6'>
<h4>Stay in Touch</h4>
<ul class='list-unstyled'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
</ul>
</div>
<div class='col-sm-4 col-md-3 col-md-offset-1 col-xs-6'>
<h4>Contact Us</h4>
<ul class='list-unstyled'>
<li><i class='glyphicon glyphicon-globe'></i> Orlando, FL<li>
<li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off<li>
<li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:#'>blastingoff#codeschool.com</a><li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
The related .css file:
.features .glyphicon {
font-size: 32px;
}
.row {
margin-bottom: 20px;
}
.quote {
background-color: #444;
color: #e1e1e1;
}
.quote blockquote {
border: none;
margin: 0;
}
.quote footer {
color: #c1c1c1;
}
section, header {
background-color: #fff;
}
body {
}
.footer {
padding: 20px 0;
}
/*
#demo-nav {
display: none;
}
.show-nav #demo-nav {
display: block;
}
*/
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 200px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 200px;
}
.footer {
color: #efefef;
background-color: #333;
}
.footer a {
color: #9af7fe;
}
#media only screen and (max-width: 768px) {
body { margin-bottom: 400px; }
.footer { height: 400px; }
}
i am trying to make two divisions in html equal in width. they should remain the same width, when they fit into one row, but also when they are aligned below each other.
The example is here: sample
When the two boxes fit into one row, it looks good:
a busy cat http://xn--audiobibelne-olb.wowogiengen.de/div_in_one_row.png
but if they float, it seems like my second div is smaller than the first
two muppets http://xn--audiobibelne-olb.wowogiengen.de/div_in_one_column.png
this is the complete code of the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {margin:auto;}
.container-inner {position:relative;left:-50%;float:right}
.container-inner ul {position:relative;left:50%}
.container-inner li {display:inline;line-height:normal; }
.container-inner li div {display: table-row;}
.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
.container-inner a:hover {text-decoration:underline}
.container-inner li:last-child {border-right:none}
.FarbeNT {background: rgba(255,128,0,0.5)}
.FarbeAT {background: rgba(0,255,0,0.5)}
</style>
</head>
<body>
<div class="container">
<div class="container-inner">
<ul>
<li>
<div class="FarbeAT">
<div style="background-color: rgba(0,0,0, 0.15);">
Das Neue Testament
<img alt="0_AudioBibel_NT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div style="">
<p>Evangelien & Apostel</p>
<p>Briefe</p>
<p>Offenbarung</p>
</div>
</div>
</li>
<li style="display: inline">
<div class="FarbeNT">
<div style="background-color: rgba(0,0,0, 0.15)">
Das Alte Testament
<img alt="0_AudioBibel_AT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div style="">
<p>Geschichtsbücher</p>
<p>Poetische Bücher</p>
<p>Prophetische Bücher</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Edit at 2016-06-03 16:03 GMT+2:
The only problem with my code sample is, that the orange box seems to be a little bit smaller than the green one when they are stacked like in the second picture.
I cant find a way to make both boxes equal in size, say 15em width and 8em height.
I removed this line
.container-inner li div {display: table-row;}
and updated this one:
.container-inner li {display:inline-block;line-height:normal;float:left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {margin:auto;}
.container-inner {position:relative;left:-50%;float:right}
.container-inner ul {position:relative;left:50%}
.container-inner li {display:inline-block;line-height:normal;float:left; }
.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
.container-inner a:hover {text-decoration:underline}
.container-inner li:last-child {border-right:none}
.FarbeNT {background: rgba(255,128,0,0.5)}
.FarbeAT {background: rgba(0,255,0,0.5)}
</style>
</head>
<body>
<div class="container">
<div class="container-inner">
<ul>
<li>
<div class="FarbeAT">
<div style="background-color: rgba(0,0,0, 0.15);">
Das Neue Testament
<img alt="0_AudioBibel_NT_zip.zip" src="assets/zip.png"/>
</div>
<div style="">
<p>Evangelien & Apostel</p>
<p>Briefe</p>
<p>Offenbarung</p>
</div>
</div>
</li>
<li style="display: inline">
<div class="FarbeNT">
<div style="background-color: rgba(0,0,0, 0.15)">
Das Alte Testament
<img alt="0_AudioBibel_AT_zip.zip" src="assets/zip.png"/>
</div>
<div style="">
<p>Geschichtsbücher</p>
<p>Poetische Bücher</p>
<p>Prophetische Bücher</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
my stylesheet looks now like that:
.container
{
margin:auto;
}
.container-inner
{
position:relative;
left:-50%;
float:right
}
.container-inner ul
{
position:relative;
left:50%
}
.container-inner li
{
display:inline-block;
line-height:normal;
float:left;
margin-right: 1em;
}
.container-inner a,.container-inner a:visited
{
color:#525252;text-decoration:none
}
.container-inner a:hover
{
text-decoration:underline
}
.container-inner li:last-child
{
border-right:none;
}
hello use display inline block for centering 2 divs with the same width i make it 50% of parent div anyway u can set any size u want and set vertical align to top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {margin:auto;}
.container-inner ul {font-size: 0; padding: 0; text-align:center; }
.container-inner li {
display:inline-block;
font-size: 13px;
line-height:normal;
text-align: left;
width: 50%;
vertical-align: top;
}
.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
.container-inner a:hover {text-decoration:underline}
.container-inner li:last-child {border-right:none}
.FarbeNT {background: rgba(255,128,0,0.5)}
.FarbeAT {background: rgba(0,255,0,0.5)}
</style>
</head>
<body>
<div class="container">
<div class="container-inner">
<ul>
<li>
<div class="FarbeAT">
<div style="background-color: rgba(0,0,0, 0.15);">
Das Neue Testament
<img alt="0_AudioBibel_NT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div style="">
<p>Evangelien & Apostel</p>
<p>Briefe</p>
<p>Offenbarung</p>
</div>
</div>
</li>
<li>
<div class="FarbeNT">
<div style="background-color: rgba(0,0,0, 0.15)">
Das Alte Testament
<img alt="0_AudioBibel_AT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div>
<p>Geschichtsbücher</p>
<p>Poetische Bücher</p>
<p>Prophetische Bücher</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>