We Keep Coding

What's the best way of doing a layout with a searchbar and 4 equal parts in html

I want to make a website that has a space at the top for a searchbar and then 4 divs in a layout like in
this image
I'm using d3 so the idea would be to represent the data in different ways, but I want the divs to adjust to the window, so something like this:
<div id ="main-bar">
</div>
<div id="view">
<div id="topLeft" class="linked-container" >
</div>
<div id="topRight" class="linked-container">
</div>
<div id="botLeft" class="linked-container">
</div>
<div id="botRight" class="linked-container">
</div>
</div>
But I don't know how to make them adjust to the window size.
I'm not pretty good at web developing so I wanted to know how could I do this in a simple way. Any suggestions?
Thanks in advance.
Edit: People are telling me I should not ask for tutorials, which is true. Anyway thanks for your answers, this is what I ended up doing:
#main-bar{top: 0; left:0; width:100%; min-height: 40px; height:10%; position: fixed; background-color: pink; }
#topLeft{top:10%; left:0; background-color: blue;}
#topRight{top:10%; left: 50%; background-color: red;}
#botLeft{top:55%; left:0; background-color: green ;}
#botRight{top:55%; left:50%; background-color: orange;}
I will look into media queries so I can better adjust the searchbar cause the min-height property is not doing what I want.

the best way to align the divs in css is with flexbox.
Check the flexbox guide here.
This should solve your problem: Working JSfiddle
<div class="wrapper">
<div class="search">Searchbar</div>
<div class="row1">
<div class="aside-1">Data #1</div>
<div class="aside-2">Data #2</div>
</div>
<div class="row2">
<div class="aside-3">Data #3</div>
<div class="aside-4">Data #4</div>
</div>
</div>
.wrapper, .row1, .row2 {
display: flex;
flex-flow: row wrap;
}
.search, .row1, .row2, .aside-1, .aside-2, .aside-3, .aside-4 {
flex: 1 100%;
}
.search {
background: tomato;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
.aside-3 {
background: deepskyblue;
}
.aside-4 {
background: green;
}
#media all and (min-width: 600px) {
.aside-1, .aside-2 { flex: 1 auto; }
.aside-3, .aside-4 { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.aside-1 { order: 1; }
.aside-2 { order: 2; }
.aside-3 { order: 3; }
.aside-4 { order: 4; }
}
body {
padding: 2em;
}

You can use the flex property if you want to adjust the size of your divs. Include the below given css in your stylesheet and you are good to go .
#view{
display:flex;
flex-wrap:wrap;
}
.linked-container{
width:50%;
height:200px;
}
You can check the working example in this jsfiddle link .
Also , for more info on flex css property try out this css-tricks link

You should learn Media queries, it will be helpful. Resize window to see.
EX: What media queries do.
Desktop
Mobile
Based on question,
body {
font-family: sans-serif;
font-size: .9rem;
}
h1 {
text-align: center;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #f2f2f2;
font-family: 'Open Sans', sans-serif;
}
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
width: 100%;
border: 3px solid #00B4CC;
padding: 5px;
height: 20px;
border-radius: 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus {
color: #00B4CC;
}
.searchButton {
position: absolute;
right: -50px;
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 5px;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 95%;
padding: 5px;
padding-bottom: 2cm;
}
/* 1 column: 320px */
.autowide {
margin: 0 auto;
width: 98%;
}
.autowide img {
float: left;
margin: 0 .75rem 0 0;
}
.autowide .module {
background-color: #00B4CC;
border-radius: .25rem;
margin-bottom: 1rem;
}
.autowide .module p {
padding: .25rem .75rem;
}
/* 2 columns: 600px */
#media only screen and (min-width: 600px) {
.autowide .module {
float: left;
margin-right: 2.564102564102564%;
width: 48.717948717948715%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 0;
}
}
/* 3 columns: 768px */
#media only screen and (min-width: 768px) {
.autowide .module {
width: 31.623931623931625%;
}
.autowide .module:nth-child(2n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 0;
}
}
/* 4 columns: 992px and up */
#media only screen and (min-width: 992px) {
.autowide .module {
width: 23.076923076923077%;
}
.autowide .module:nth-child(3n+0) {
margin-right: 2.564102564102564%;
}
.autowide .module:nth-child(4n+0) {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="autowide">
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=1" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=2" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=3" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
<div class="module">
<p><img src="http://ximg.es/60/666666/ffffff&text=4" alt="" />CSS is a plain text file format used for formatting content on web pages. CSS stands for Cascading Style Sheet and is used by web pages to help keep information in the proper display format.
CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.</p>
</div>
</div>

See here: https://jsfiddle.net/
#main-bar {
height: 50px;
width: 100%;
background: green;
}
#view {
display: flex;
width: 100%;
flex-wrap: wrap;
> * {
flex: 1 0 50%;
height: 200px;
display: block;
&:first-child {
background: red;
}
&:nth-child(2) {
background: yellow;
}
&:nth-child(3) {
background: purple;
}
&:last-child {
background: orange;
}
}
}
Note that this uses flex so you'll need to make some fallbacks/tweaks for specific browsers. I'd usually do this with some PostCSS Autoprofixers to help with browser support.
All the best!

Make floated element have height 100% to fill page

I am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.
At the moment it stops at normal page height and doesn't increase height.
Is there any way I can achieve this?
JFiddle: https://jsfiddle.net/hjnheonk/
HTML:
<div class="container">
<div class="navbar-left">
<div id="top">
<h2><b>Admin</b>Panel</h2>
</div>
<div id="navigation">
<ul>
<li class="nav-header">Main Pages: </li>
<li>
Home
etc ...
</ul>
</div>
</div>
<div id="navbar-top">
<div id="user">
<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
</div>
<div id="icon">
<span>
<hr><hr><hr>
</span>
</div>
<div class="main">
</div>
</div>
</div>
**CSS: **
html,body {
height: 100%;
}
.container {
margin-left: 230px;
height: 100%;
position:relative;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
width: 230px;
margin-left: -230px;
height: 100%;
float:left;
}
.navbar-left #top {
background-color:#367fa9;
min-height: 50px;
text-align: center;
}
.navbar-left #top h2 {
font-size: 20px;
padding: 15px 0px;
}
#navbar-top {
float:right;
width: 100%;
position:relative;
background-color:#3c8dbc;
width: 100% !important;
margin:0 auto;
border: none;
min-height: 51px;
}
#navbar-top #icon {
width: 20px;
padding: 18px 10px !important;
}
#navbar-top #icon hr {
margin:0 auto;
padding: 0px;
border: 1px solid white;
border-radius: 5px;
}
#navbar-top #icon hr:not(:first-child) {
margin-top: 5px;
}
#navbar-top > div:hover:not(#userDropdown) {
background-color:#47a0d3;
cursor: pointer;
}
#brand {
float:left;
}
#navigation .nav-header {
background-color: #272f33;
padding: 12px 30px;
text-align: left;
margin-top: 40px;
margin-bottom: 25px;
}
#navigation ul li a:hover {
background-color: #273136;
}
#navigation ul li a {
width: 100%;
display: block;
padding: 12px 0px;
background-color: #1a2226;
text-align: center;
color:white;
text-decoration: none;
}
.main {
float:left;
width: 100%;
background-color:pink;
height: 1000px; /*Used as an example to show */
}

There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.
Basically in your case there different ways to proceed:
calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes
Which way to go, is up to you.

Does the container need to be defined as percentage? If not then you could do something like this:
$('.navbar-left').css('height', $('.container').height()+'px');

Using Farside's method and updating a little bit here is my code:
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
});

Here is a Pure CSS way to acheive the same.
JS Filddle: https://jsfiddle.net/cx6nu8sw/
Following are the classes from your code which are changed
#navbar-top {
width: 100%;
position:relative;
background-color:#3c8dbc;
margin:0 auto;
border: none;
min-height: 51px;
display:table-cell;
vertical-align:top;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
display:table-cell;
vertical-align:top;
}
//newly addition
#navigation{
width:230px;
}
As mentioned by #Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row.
But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.

How to add a class if div height reaches a fixed height?

I have some modules on my project that are generated dynamically. This basic HTML will work fine as an example of what I want to achieve:
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
My problem is that I don't want this module to ever grow too much vertically, if the web administrator writes a long "description" (I can't limit how much he wants to write as the "description" text will show on other pages).
I found a nice CSS trick to add "ellipsis" to a multiple lines container. Here you can see this "trick" in the .ellipsis (plus the basic CSS):
.container {
background-color: #eee;
width:100px;
margin:20px;
float:left;
}
.image {
border:2px solid #999;
width:100px;
height:60px;
background-color: #fff;
margin-bottom:10px;
}
.end {
border:2px solid #999;
width:100px;
background-color: #fff;
}
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom:10px;
position:relative;
}
.ellipsis:before {
content:"";
float: left;
height:100%;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 20px; margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color:#eee;
}
You can see everything together here: JSFIDDLE
The problem I have is that while ellipsis works fine, I don't want ALL the modules to have a fixed height. I just want to limit the max-height to a fixed size. (Just delete "height: 200px;" from ".ellipsis:before" to see what I want to achieve.)
So, the problem is the .ellipsis:before fixed height. 100% height won't work unless I turn the position to absolute, but then the "ellipsis" trick won't work as the float won't take effect.
Any help with my problem will be greatly appreciated. I don't think there may be a pure CSS solution, (trust me, I have tried) and I'm very bad a JavaScript/jQuery. However, if you have a jQuery solution that may help, I could implement it in the project (and give you nice rep points here :) ). I was thinking something like:
If div.ellipsis > 200px then add height:200px to ellipsis:before
Thanks a lot in advance and please excuse my poor English. Hope the question is clear enough.

There is no need of :before pseudo class. Check this fiddle.
.ellipsis:after {
content:"\02026";
position: absolute; /* removed position: relative */
top: 200px; /* equal to max-height value */
right: 0px;
margin-top: -25px; /* equal to line-height value */
/* other styles */ /* removed float property */
}
Working Fiddle
In the above fiddle, I removed :before pseudo class and set the position of the :after pseudo class to top by 200px which is equal to the given max-height value of the .ellipsis.
and to remove the default upper and lower gaps of the container, I added margin-top: -25px which is equal to the given line-height.
Note: You can apply just top: 175px which is result value of subtraction of given max-height and line-height values.

Here's a simple jQuery solution.
First add a class for when an ellipsis reaches the maximum height, let's call it maxed. Set the :before height for that to 200px:
.ellipsis.maxed:before {
height:200px;
}
Then as you say. you can do some simple jQuery to check the height. If it is the maximum, then add our maxed class to the ellipsis:
$(function() {
$('.container .ellipsis').each(function() {
var $this = $(this);
if($this.height() >= 200) {
$this.addClass('maxed');
}
});
});
Updated fiddle here

You can do it easily with jquery (I assume jquery is an available option in your project).
You just have to
Remove all "ellipsis" class from HTML
Add "ellipsis" whenever needed with JS (= when your content exceeds 200px).
For that, you can use the following :
$('.description').each(function(){
if($(this).height() >= 200 ){
$(this).parent().addClass('ellipsis');
}
});
Working JSfiddle

You can't directly manipulate pseudo elements like :before. What you could do here is add a class for large ellipsis with height: 200px. Then use jQuery to add the new class according to the height.
$(function() {
$('div.ellipsis').each(function (index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
See the code snippet for the full example:
$(function() {
$('div.ellipsis').each(function(index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
.container {
background-color: #eee;
width: 100px;
margin: 20px;
float: left;
}
.image {
border: 2px solid #999;
width: 100px;
height: 60px;
background-color: #fff;
margin-bottom: 10px;
}
.end {
border: 2px solid #999;
width: 100px;
background-color: #fff;
}
/* ellipsis class for small modules */
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom: 10px;
position: relative;
}
.ellipsis:before {
content: "";
float: left;
height: 100%;
width: 5px;
/* height: 200px; */
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 20px;
margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color: #eee;
}
/* ellipsis class for large modules */
.ellipsis-large:before {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class="ellipsis">
<div class="description">and here we have a much longer text to reach the 200px "ellipsis" div to activate the effect made with pure css. a nice discovery from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
</div>
</div>
<div class="end">
buttom
</div>
</div>

CSS window width resize issues

I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.

Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs

This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}

Center images inside 2 columns of a section

Code is right now:
HTML:
<section class="sponsorSection">
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/kvadrat_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/small_vertical_logo.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/long_vertical_logo.png" class="sponsorpicture1"/>
</div>
<div class="sponsorImageColumn">
<img src="img/logo4.png" class="sponsorpicture2"/><br>
</div>
</div>
<div class="sponsorImageRow">
<div class="sponsorImageColumn">
<img src="img/logo5.jpg" class="sponsorpicture1"/>
</div>
</div>
</section>
CSS:
.sponsorSection{
width: 480px;
margin-top:30px;
border:2px solid rgba(0, 0, 0, .2);
border-radius: 5px;
}
.sponsorImageRow{
height: 50px;
}
.sponsorImageColumn{
width : 50% ;
display: inline;
}
.sponsorpicture1{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
.sponsorpicture2{
padding: 10px;
max-width: 100%;
max-height: 95%;
height : auto;
margin: 0 auto;
}
Though it does not look correct:

I'm not sure, if I understood your requested positioning correctly, but if I look at your code, you want your image to be horizontal centered? Since image is an inline element per default the margin:0 auto will not be considered. Try something like this:
/* keep it as a block element, not inline */
.sponsorImageColumn {
width : 50% ;
float:left;
display: block;
}
/* and image also as a block element */
.sponsorSection img {
display:block;
}
I put together a small fiddle to demonstrate.
For more complex positioning you could have a look at the css-syntax display: table, table-row and so on, to emulate a classic table with other html elements.

Make the following change to your CSS -
.sponsorImageColumn{
width : 50% ;
float : left; /*remove display property and use float as you want to set the width*/
}
hope this solves your query