I have an HTML page and I want to have a table that has four or five section and this is my first section with two columns but my text on the left side I can't get to the top. I'm tried adding padding-top: 0; adjusting the margin, aligning. I think maybe the combo on the div either adding to the sidebar or mycolumn in the table row since I want to rows in the left column.
/*CSS*/
#sidebar {
width: 750px;
}
.table-row {
display: table;
width: 100%;
margin-top: 0px;
}
.mycolumn {
display: table-cell;
padding: 15px;
}
#content {
width: 100%;
}
div {
outline: none;
}
#sidebar1 {
width: 750px;
}
.table-row2 {
display: table;
width: 100%;
}
.mycolumn1 {
display: table-cell;
padding: 15px;
}
#content1 {
/* width:100%; */
}
<!-- HTML -->
<div class="container">
<div class="row">
<div class="table-row">
<div class="mycolumn" id="sidebar">
<h1 class="promo_slogan"> Bring everyone together to build better products.</h1>
</div>
<div class="mycolumn" id="content"><img src="file:///C:\Develop\CodeSamples\manage-landing-page-master\images\illustration-intro.svg">
</div>
</div>
</div>
</div>
Try to use display: flex;instead of display: table;
And then set your h1 margin: 0;, because the h1 tag has default margin.
You use container and row as classes, but you don't define it in your css. Are you using bootstrap?
You also have padding in mycolumn. This will add padding left, top, right, and bottom.
Also consider:
.mycolumn { vertical-align: top; }
to force to the top.
Related
doc.html
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
</body>
</html>
I wrote doc.html and css2.css according to this guide learnlayout. but the page looks like this.
how to make those two parts in one line?
Your CSS is correct; this issue is a well known whitespace problem. You need to make sure that there is no whitespace between the tags:
<body>
<div class="container elem"
><div class="nav"></div
><div class="elem column"></div
></div>
</body>
This is because your content is inline, which makes the whitespace between .nav and .elem flow. It's small (around 4px), but enough to separate your <div>s and break your layout.
By placing the closing bracket right next to the starting bracket in the next element, all the whitespace in between is instead inside the tag, not part of the content (and since tags can contain whitespace between attributes and tag names, this is OK).
This is the typical whitespace problem with inline-block. You can always solve it by assigning font-size: 0; to the parent element.
.container.elem {
font-size: 0;
}
/* remember to reset font-size to what you need in child elements */
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
<div class="container elem">
<div class="nav"></div>
<div class="elem column"></div>
</div>
Another solution would be to make both divs float left, but that has it's own problems and complexity which is why I'd advise sticking with inline-blocks.
The issue is with whitespace. To fix it, apply this CSS to the container:
.container{
font-size:0;
}
It's simply make them into one line, except if the parent width is setted and their combined width is bigger than their parents.
.container.elem div{
float:left;
}
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
I am trying to best figure out how to set two columns' a-elements to 100% of the parent element, without specifying this height, but having it chosen based on the taller of the two columns. At the same time, I want to vertically align the a-element within it's column.
Current code:
<div class="post-nav group">
<div class="post-nav-prev">
<div class="post-nav-border border-reset-right">
<?php previous_post('%', '', 'yes'); ?>
</div>
</div>
<div class="post-nav-next">
<div class="post-nav-border">
<?php next_post('%', '', 'yes'); ?>
</div>
</div>
</div>
CSS:
.post-nav {
}
.post-nav-prev, .post-nav-next {
float: left;
width: 50%;
height: 100%;
}
.post-nav-prev a, .post-nav-next a {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
height: 100%;
padding: 10px;
}
.post-nav-prev a {
padding-left: 25px;
}
.post-nav-next a {
padding-right: 25px;
}
.post-nav-border {
border: 1px solid #e3e3e3;
height: 100%;
}
What I eventually run into as the problem is when the two post titles isn't the same amount of lines. I originally had a specified height, but this isn't optimal for the responsive aspect of the website.
So to clarify: How would I go about having the tallest of '.post-nav-prev a', and '.post-nav-next a' specify a height for .post-nav, so the other of the two a elements also get 100% height. I've seen suggestions for display: table, but I couldn't quite get that to work, as well as keeping the vertical alignment of display: flex.
Any suggestions?
The simplest solution (without JS) is indeed to fiddle with the display property and set it the container to table and children to table-cell (you might as well change the actual markup to be a table, the result is the same). With this, vertically aligning becomes easy as hell and the CSS & HTML are much simpler. Here's how:
.post-nav {
display: table;
border-collapse: collapse;
}
.post-nav-prev a, .post-nav-next a {
display: block;
padding: 10px;
}
.post-nav-prev, .post-nav-next {
display: table-cell;
vertical-align: middle;
width: 50%;
height: 100%;
border: 1px solid #e3e3e3;
text-align: center;
}
<div class="post-nav group">
<div class="post-nav-prev">text 1</div>
<div class="post-nav-next">
text 2 is too long and falls in 2 lines for the example case
</div>
</div>
if youre open to jquery, would something like this work for you?
$(document).ready(function() {
adjust();
function adjust() {
if ($('.left a').height() > $('.right a').height()) {
$('.right a').css("min-height", $('.left a').height());
}
if ($('.right a').height() > $('.left a').height()) {
$('.left a').css("min-height", $('.right a').height());
}
}
$('.addLeft').click(function() {
$('.left a').append('<br/>Adding more');
adjust();
});
$('.addRight').click(function() {
$('.right a').append('<br/>Adding more');
adjust();
});
});
.left, .right {
display: inline-block;
width: 40%;
vertical-align: top;
}
a {
height: 100%;
display:inline-block;
}
.left a {
background-color: lightblue;
}
.right a {
background-color: lightgray;
}
.container {
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Add more to Left
<br/>
Add more to Right
<br/><br/>
<div class="container">
<div class="left">
A element
</div>
<div class="right">
A element<br/>More content here
</div>
</div>
I am trying to center my .get-started-btn vertically within a bootstrap column. I believe that the problem may be because this button is already placed inside a div with display: table-cell so i cannot create a table-cell within another table-cell? Is there another way to center the button vertically?
See my fiddle:
JS Fiddle
<div class="page-wrap">
<main>
<div class="jumbotron" id="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="page-header">Flash <span class="page-header-label">Cards</span></h1>
<p class="lead intro-text">
Flash Cards is a simple solution for anyone trying to memorize new things or study for that next big test.
Create your own personal deck of flash cards in minutes and we will track your results to ensure that
you know your stuff.
</p>
</div>
<div class="col-md-4">
<div class="vcenter">
Get Started
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end jumbotron -->
</main>
</div>
CSS
.page-wrap {
width: 100vw;
height: 100vh;
}
main {
display: table;
width: 100%;
height: 100%;
}
#jumbotron {
display: table-cell;
vertical-align: middle;
float: none;
}
.vcenter {
display: table;
height: 100%; /* does nothing */
width: 100%; /*pushes element to new line */
text-align: center;
}
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}
Apologies for misunderstanding your question. Once I increased the width, I saw the two columns.
You can vertically center the button by adding these styles:
.row {
display: table-cell;
}
.vcenter a {
position: relative;
top: 50%;
transform: translateY(-50%);}
}
Fiddle
Does div with paragraph will always have the same content? If yes then you could try:
.vcenter {
line-height: 270px; /*height of entire div on the left*/
}
And remove this:
.vcenter a {
display: table-cell;
vertical-align: middle;
float: none;
}
I am having trouble vertical aligning text in a div. I have tried suggestions that i have read on other posts. I'm sure its obvious what I am doing wrong but its not working.
http://jsfiddle.net/o6gqvtoo/
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text{
display: block;
vertical-align: middle;
}
.pull-left {
display: block;
}
vertical-align is sort of an odd one.
Generally you should use it on the elements themselves, not their containers and it's really only for inline and inline-block elements.
But even then it probably won't vertically center like (I'm guessing) you are wanting. So a little trick is to set your line-height to the same as your height and voila:
http://jsfiddle.net/06c7eosv/
Note: With display: inline-block and width: 50% you can't have any white space between the elements in your html
Good:
<div>...</div><div>...</div>
Bad:
<div>...</div>
<div>...</div>
Based on the supplied image and limited information availableI believe that the best option available is to absolutely position the banner-text wrapper div
.banner {
margin-top: -2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}
.banner-text {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.pull-left {
display: block;
}
<div class="banner">
<div class="span10">
<!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
</div>
</div>
</div>
That said, other options may be available if the two internal divs can be combined.
Usually, vertical-align sets the alignment of inline level elements relatively to the line box.
However, in when applied to table cells, it has a different meaning: it sets the alignment of the content inside the cell.
Therefore, you can use CSS tables:
.banner {
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text {
display: table-cell;
vertical-align: middle;
}
.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
display: table;
width: 100%;
}
.banner > .span10 {
display: table-row;
}
.banner-text{
display: table-cell;
vertical-align: middle;
}
.pull-left {
display: block;
/* float:left; */
}
<div class="banner">
<div class="span10"> <!-- bootstrap -->
<div class="banner-text">
<div class="pull-left">Here is the first line of text i want to center</div>
<div class="pull-left">Here is the second line of text i want to center</div>
<div class="clear"></div>
</div>
</div>
</div>