I am designing a website for software created by my self. For this, I need a layout in which three boxes are on the same horizontal position. But as I put text in those they start shifting.
What might be the possible cause?
<body class="metro">
<nav class="navigation-bar">
<nav class="navigation-bar-content">
<div class="element">My Software Name</div>
<span class="element-divider"></span>
<a class="element place-right" href="#">Download</a>
</nav>
</nav>
<div class="slideImage"></div>
<div class="about">
<div class="infoBar">
<h2>What is ?</h2>
<span class="paragraph">
this is example text to illustrate the real problem regardig the info bar alingment
</span>
</div>
<div class="infoBar"><h2>Why this ?</h2>
<span class="paragraph">
</span>
</div>
<div class="infoBar"><h2>About</h2></div>
</div>
</body>
Here is full Scree Example
You could do it by set the vertical-align:top; to .infoBar to remove the vertical whitespace between inline-block elements.
JSFiddle - DEMO
CSS:
.infoBar {
vertical-align:top;
}
Related
I am trying to make this table only by using divs because I will use Angular Components in it and, as I know, it's not working with table tag.
This is my code by now,
https://codepen.io/teodora-malec/pen/vQdJPr
I tried display: block for month, kv, date and tag and it worked and then I tried
<div class="wrapper">
<div class="left">
<label class="month">MONTH</label>
</div>
<div class="right month-name">
<label> MONTH-NAME & YEAR </label>
</div>
</div>
because I tried the solution from this question: How to place two divs next to each other?
and it looks like this
should I put the divs differently or my css code is wrong?
It's a good practice to use the class "clearfix", while playing around with float. Here is the link:What is a clearfix?
Secondly, your structure needs to be slightly modified for better /efficient coding. Though I have adjusted your needs in the provided solution, but my suggestion would be to go through your structure design once again.
Here is the working demo:
https://jsfiddle.net/posywj78/
Html
<div class="month-header">
<div class="wrapper clearfix">
<div class="left">
<label class="month">MONTH</label>
</div>
<div class="right month-name">
<label> MONTH-NAME & YEAR </label>
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="kw">KV</label>
</div>
<div class="right">
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="date">DATE</label>
</div>
<div class="right">
</div>
</div>
<div class="wrapper clearfix">
<div class="left">
<label class="tag">TAG</label>
</div>
<div class="right">
</div>
</div>
</div>
You should use below style.
<style>
.month, .kw, .date, .tag {
display: flex;
flex-direction:column;
}
.wrapper {
display: flex;
}
</style>
As the title says, how do I center two divs next to each other perfectly?
My HTML: (or well, a bit of it)
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row row-centered">
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
My CSS: (same here, this isn't all)
I tried to make a box for the css above too but it didn't work. http://pastebin.com/SzhAmh3f
Basically the problem I'm having is that the code above works kind of but one of the blocks are a little bit lower than the other and i have no idea why.
Yes, I know that there are other posts about this subject but no one worked for me so I decided to open my own.
There are a lot of unwanted styles actually to achieve this, you simply need the below code on your team-centered class. Remove row-centered class. It should look like this
CSS
.team img {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 10px auto 40px;
}
.team-centered {
width: 50%;
float:left;
text-align: center;
}
HTML
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row">
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
Preface: I cannot change the HTML.
To better explain my question, I have provided an illustration below. Essentially, I have two rows of divs - the first row has content, and the second row would have a button beneath the content.
I want to make the page responsive, so that the div with a button always is below its corresponding div with content, but the extra container divs are proving a challenge. Any ideas?
What I have (above) and what I want (below).
Here's the HTML code:
<div class="choice-section">
<div id="choice_1" class="choice odd" style="margin-top: 242px;">
<div class="content">asdf</div>
</div>
<div id="choice_2" class="choice even" style="margin-top: 322px;">
<div class="content">asdf</div>
</div>
</div>
<div>
<div class="vote-choice odd">
<a class="vote btn" href="javascript:void(null)" choice="1">Vote</a>
</div>
<div class="vote-choice even">
<a class="vote btn" href="javascript:void(null)" choice="2">Vote</a>
</div>
</div>
I would strongly reccomend looking at Bootstrap's grid and column system with which this can easily be achieved. This framework will make responsive design a breeze for you.
You can see an example of something pretty similar to what you are trying to achieve in a Plunker I very quickly put together
CSS:
.blue {
background-color:blue;
height:200px;
}
.red {
background-color:red;
height:200px;
}
.purple {
background-color:purple;
height:200px;
}
.green {
background-color:green;
height:200px;
} here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="red">
</div>
</div>
<div class="col-sm-3">
<div class="blue">
</div>
</div>
<div class="col-sm-3">
<div class="purple">
</div>
</div>
<div class="col-sm-3">
<div class="green">
</div>
</div>
</div>
I'm creating a site and I'm stuck at a probably simple thing. I have an <h4> tag that says something and I want on the same line but some spaces to the right to have a <p> tag with some text in it. Whatever I do it either gets the text exactly next to the <h4> tag or when I do something like align:right it puts it under the <h4> tag. Here is my code:
<div class="col-md-8">
<div class="col-md-8">
<h1 id="title">Education</h1>
<h4 style="display: inline">University</h4>
<p style="align=right"> 2009 - 2015<br></p>
<p style="display: inline">B.Sc in Computer Science</p>
<p style="display: inline"> Grades: 2:1</p>
<span>
<h4>Highschool</h4>
<p>2006 - 2009</p>
</span>
</div>
</div>
I'm using bootstrap to do the grid layout. I don't know if this plays a role in this problem.
Without code structure change
Make the elements in the same line inline and just float your date range to the right.
.title-right {
float: right;
}
.title-left {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
<div class="col-md-8">
<h1 id="title">Education</h1>
<h4 class="title-left">University</h4>
<span class="title-right"> 2009 - 2015</span>
<span>B.Sc in Computer Science</span>
<span> Grades: 2:1</span>
<span>
<h4>Highschool</h4>
<p>2006 - 2009</p>
</span>
</div>
</div>
This way you don't have to include the date range in the header like in Maddy's answer, which works, but it isn't proper HTML5 semantics, because you include stuff in the header that doesn't goes there.
Also a few more things to consider:
Don't use paragraphs for things that are not paragraphs. You build up a line from multiple elements. That is what <span> is for. This way you also don't have to add display:inline everywhere.
Don't use inline styles. Create classes and add the styling over there.
Better code structure
Old school way
If you want to place everything in two column, just create <div>s for the lines and make the left side text inline while you float the right side text to the right.
.float-right {
float: right;
}
.inline {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
<div class="col-md-8">
<h1 id="title">Education</h1>
<div>
<h4 class="inline">University</h4>
<span class="float-right"> 2009 - 2015</span>
</div>
<div>
<span>B.Sc in Computer Science</span>
<span class="float-right"> Grades: 2:1</span>
</div>
<div>
<h4 class="inline">Highschool</h4>
<p class="float-right">2006 - 2009</p>
</div>
</div>
</div>
New school way
With the same DOM as in the previous section you can just slap a flexbox to the row and align the children to the sides. This solution assumes that you have only 2 children, one for each side.
.side-layout {
display: flex;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-8">
<div class="col-md-8">
<h1 id="title">Education</h1>
<div class="side-layout">
<h4>University</h4>
<span> 2009 - 2015</span>
</div>
<div class="side-layout">
<span>B.Sc in Computer Science</span>
<span> Grades: 2:1</span>
</div>
<div class="side-layout">
<h4>Highschool</h4>
<p>2006 - 2009</p>
</div>
</div>
</div>
Use a span tag in h4 (heading) tag.
<div class="col-md-8">
<h1 id="title">Education</h1>
<h4 style="display: inline">University
<span style="float:right"> 2009 - 2015</span>
</h4>
<p style="display: inline">B.Sc in Computer Science</p><p style="display: inline"> Grades: 2:1</p>
<span>
<h4>Highschool</h4>
<p>2006 - 2009</p>
</span>
</div>
I'm creating my first web page and I have 3 boxes with an image and text as contet. How do I make the boxes the same height regardless of the content?
New to css etc so please help.
I have tried padding, margin etc but nothing. My code is as follows:
<!------------------------------ Three Small Span Boxes --------------------------->
<div class="container-full-width" id="boxes_lite_section">
<div class="container" >
<div class="container-fluid" >
<!-- Start of markup for boxes lite element -->
<div id="widget_boxes_container" class="row-fluid" >
<div class="boxes">
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here funding.
</p>
</div>
<!--end box1-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify" style="margin-top:20px">
content here
</p>
</div>
<!--end box2-->
<div class="box span4">
<p>
***
</p>
<a class="box-link">
<img class="box-image" src=".jpg" />
</a>
<p align="justify">
content here
</p>
</div>
<!--end box3-->
</div>
<!-- end boxes -->
</div><!-- end row-fluid -->
<!-- End of markup for boxes lite element -->
</div>
<!-- .container-fluid-->
</div>
<!-- .container -->
</div>
<!----------------------------- End Three Small Span Boxes ------------------------->
When you set the height for an element, it will be shown with this regardless of the content.
BUT if the content become taller than height, the result may be very ugly.
so, it's better to set overflow:auto in your case, that will save the box height when content is taller...
div.box {
width: 350px; /*for example*/
height:300px; /*for example*/
background: blue; /*for example*/
color:white; /*for example*/
overflow:auto; /*for example*/
border:4px solid red; /*for example*/
}
You can see result Here and you can find out your last question you mentioned in comment...
If you want to hide overflow, try overflow:hidden instead...
If you are dealing with variable height you can use CSS tables to render your divs.
div.boxes { display:table-row; }
div.box { display:table-cell; }
This jsfiddle should give you an indication of what it will look like with your layout.
Practically every major browser supports CSS tables now, so feel free to use them when necessary. Fixed heights are ok, but can cause issues when your content grows beyond your original expected size.