I have been trying my hand at Electron and for that, I am trying to create 2 divs, next to each other. I have read a few solutions on here for aligning 2 divs next to each other, but nothing works for me. Here's my code so far:
Code
body, html {
height: 100%;
}
.wrapper{
height: 90%;
}
.request-pane {
float:left; /* add this */
margin-left: 10%;
height: 90%;
width: 45%;
border: 1px solid red;
}
.response-pane {
float:right; /* add this */
margin-left: 55%;
height: 90%;
width: 45%;
border: 1px solid black;
}
<div class="wrapper">
<div class="request-pane"></div>
<div class="response-pane"></div>
</div>
Can anyone point me out what I'm doing wrong here? I am very new to HTML, so I don't know if the solution is too obvious or not
you can do it by two ways.
remove float atrribute and add
.wrapper{
height: 90%;
display: flex;
}
try using display:inline-block in css for both request-pane and response-pane
If you want to keep floats here - fixed with code
body, html {
height: 100%;
}
.request-pane, .response-pane {
box-sizing: border-box; /* count border inside of a `width` */
}
.wrapper {
height: 90%;
}
.request-pane {
float: left;
margin-left: 10%;
height: 90%;
width: 45%;
border: 1px solid red;
}
.response-pane {
float: right;
/* margin-left: 55%; */ /* this is a root of a problems */
height: 90%;
width: 45%;
border: 1px solid black;
}
<div class="wrapper">
<div class="request-pane"></div>
<div class="response-pane"></div>
</div>
But yes, you probably better to go with flexbox. A good guide to it you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Also, it looks like you lack a basic understanding of how HTML/CSS work, so you'd better have some basics free courses to moving forward.
Remove the margin-left property and also add display:inline-flex to the css class request-pane and response-pane as shown below.
body, html {
height: 100%;
}
.wrapper{
height: 90%;
}
.request-pane {
float:left; /* add this */
height: 90%;
width: 45%;
border: 1px solid red;
display:inline-flex;
}
.response-pane {
float:right; /* add this */
height: 90%;
width: 45%;
border: 1px solid black;
display:inline-flex;
}
<div class="wrapper">
<div class="request-pane"></div>
<div class="response-pane"></div>
</div>
This works fine. Do run the code from snippet,I hope that's the result you wanted.
If you want even more simpler way, use bootstrap. Divide your screen into two halves. In each section create div. This will full fill your requirements.w3school is best website for this.
Related
folks, I am learning the basics of web development. I have used two fieldsets in the page as CSS id
#lfieldset
{
width: 1019px;
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
this is how it looks
Screenshot1
and the meta tag
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
for layout, but the second fieldset comes to the bottom if I reduce the window, see
Screenshot2
how can I solve this?
You should use % instead of px to manage the size of your fieldsets.
#lfieldset
{
width: 80%;
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
Another alternative if you want to keep the size of on of those, use the calc function to set the width:
#lfieldset
{
width: calc(100% - 300px);
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
Use % or ems for responsive design. Usage of pixels is not a good practice and does not give you a responsive design
Instead of fiddling around with floats ,you may consider using display:flex for the same
check this snippet
#lfieldset {
width: 90%;
height: 50%;
background: #ffffff;
border-radius: 8px;
border: none;
}
#rfieldset {
width: 10%;
height: 20%;
background: #ffffff;
border-radius: 8px;
border: none;
}
.wrapper {
display: flex;
justify-content: space-between;
border: 1px solid;
}
<div class="wrapper">
<feildset id="lfieldset">
this is left
</feildset>
<feildset id="rfieldset">
this is right
</feildset>
</div>
Hope it helps
There are three approaches you can take in this situation.
Responsive approach 1: Here you elements will use width in percentage or em or rem:
#lfieldset
{
width: 80%;
height: 500px;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
float: left;
}
Responsive approach 2: Whenever browser width decreases, allow elements to stack one below another. You are currently doing something similar. Better version would be:
#lfieldset
{
width: 80%;
height: 500px;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
float: left;
}
#media only screen and (max-width: 768px) {
#lfieldset
{
width: 100%;
float: none;
}
#rfieldset
{
width: 20%;
float: none;
}
}
Fixed approach: Let there be horizontal scrollbar. In that case, you will have to create a wrapper element:
<div class="wrapper">
<fieldset id="lfieldset"></fieldset>
<fieldset id="rfieldset"></fieldset>
</div>
/* CSS */
#lfieldset
{
width: 1019px;
height: 500px;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
float: left;
}
.wrapper {
width: 1319px; /* Sum of 1019px + 300px */
}
In this approach, when you reduce the size of browser, you will get horizontal scroll bar.
Please notice: I am not using float: right even for rfieldset. Using left float will ensure that when right is pushed downwards, then you still get proper left alignment.
As a beginner, you might wonder the syntax I used in responsive approach 2. It is media queries from CSS3. Choose your solution depending on your requirements (responsive layout vs. fixed layout using horizontal scrollbar).
To further understand different layout techniques in CSS, go through:
http://www.slideshare.net/HarshalPatil4/css-layout-techniques
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
I'm trying to add two square ads to the right of the image on the web-site. The idea is to make this responsive like this:
http://s9.postimg.org/pdecyqi8f/div.png
Is this possible to achieve using CSS?
I use inline-block to position ads to the right and max-width: 100% to scale the image. I need the support of IE 9+ and mobile browsers.
I tried different approaches, don't even know which code example to show. It is relatively easy to position ads to the right of the image using inline-block:
div{
border: 2px solid;
}
#img,#container{
display: inline-block;
vertical-align: middle;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="img"> </div>
<div id="container">
<div id="ad1">ad1</div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/w7zfj1ju/
Yet in this case I won't get desired view on narrow screens. Also, since max-width: 100%; is used for #img this div would cover #ad1 and #ad2 on narrow screens.
To achieve desired mobile view I had to change HTML to the following:
div{
border: 2px solid;
display: inline-block;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
http://jsfiddle.net/gxnqo8da/
In this case I didn't really know how to position #ad1 to the right of the #img. I gave a try to absolute positioning, it did not work. Flex also seemed not to be an option due to compatibility reasons.
I also tried to use direction:rtl; like this:
div{
border: 2px solid;
display: inline-block;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
<div id="ad2">ad2</div>
</div>
http://jsfiddle.net/n1mo76bv/
and this:
div{
border: 2px solid;
text-align: left;
}
#container{
direction:rtl;
border: 0px;
}
#ad1, #ad2{
width: 30px;
height: 30px;
color: red;
vertical-align: top;
}
#img{
width: 100px;
height: 150px;
max-width: 100%;
color: purple;
display: inline-block;
}
#ad1{
display: inline-block;
}
<div id="container">
<div id="ad1">ad1</div>
<div id="img"> </div>
</div>
<div id="ad2">ad2</div>
http://jsfiddle.net/w7sknehL/
didn't help much since I could not position #ad2.
So, I don't ask to write any code. I'm just desperate for an advice.
If you don't need to support Android 2 and Opera Mini you can still use flexbox to achieve this result via media query. Example below:
.img {
width: 100%;
max-width: 100%;
height: 300px;
background: blue;
}
.ad {
background: red;
width: 100px;
height: 100px;
}
#media (min-width : 801px) {
.wrapper {
padding-right: 110px;
}
.img {
float: left;
}
.ad {
clear: right;
float: right;
margin-right: -110px;
margin-bottom: 10px;
}
}
#media (max-width : 800px) {
.wrapper {
display: flex;
flex-direction: column;
}
.img {
order: 2;
margin: 10px auto;
}
.ad {
margin: 0 auto;
}
.ad1 {
order: 1;
}
.ad2 {
order: 3;
}
}
<div class="wrapper">
<div class="img"> </div>
<div class="ad ad1">ad1</div>
<div class="ad ad2">ad2</div>
</div>
Also:
I didn't use browser prefixes for flexbox, so it will not work in all browsers. Add prefixes or use autoprefixer to make it work there.
Fix media query parameters for you needs, I only inserted width 800 as example value, real query to detect mobile will differ.
I have a container with a defined height containing two divs, the first which has a pixel-defined height and the second which I would like to fill the remaining space of its container, i.e. 100% minus first div's pixel-defined height.
Is there a solution to this problem which doesn't involve JavaScript? I can use a JavaScript solution (and in fact JavaScript changing the container's height is what brought me here), but this seems like it should have lower-level support, and this looks like it might become quite a cascading problem.
Example
http://jsfiddle.net/h3gsz/1/
HTML
<div id="container">
<div id="top_content"></div>
<div id="remaining_content"></div>
</div>
CSS
#container {
width: 400px;
height: 400px;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
}
Edit
An answer was already provided for the original fiddle, but in simplifying the question I allowed the answer to introduce new problems: http://jsfiddle.net/h3gsz/6/
I had removed the inline-block styling and a max-width value. Given the absolute positioning of the remaining content, the container's width is no longer defined by said content (from inline-block), so a horizontal scrollbar is introduced where there shouldn't be one.
I'm not sure if I should simply make a new question or not.
#container {
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
top: 50px;
bottom: 0;
position: absolute;
}
http://jsfiddle.net/h3gsz/4/
How about using overflow:hidden;?
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow:hidden;
}
JSFiddle.
Why not just use auto?
http://jsfiddle.net/h3gsz/3/
CSS:
#container {
width: 400px;
height: auto;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: auto;
}
you could also do it by using display:table; fiddle here
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
Someone more experienced might have a better option but you can try this :
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow: hidden ;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
margin-bottom: 0;
}
Depending on what you want to use this for you could remove the #remaining_content <div>
HTML:
<div id="container">
<div id="top_content"></div>
</div>
CSS:
#container {
background-color: green;
width: 400px;
height: relative;
min-height:400px;
border: 5px solid black;
overflow:none;
word-wrap:break-word;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
I've been playing with this code for almost half of the day and I finally decided to pass it on to you. I would like to place three div elements next to each other with the left and right ones surrounding the main one. I would like both of the outer divs to contain only a background image and hence take on the same height as the middle div. I've been playing with solutions from other posts like this, but all of my tries were unsuccessful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
<div id="right"></div>
</div>
</body>
CSS:
body {
text-align: center;
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
}
p {
font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
margin: 20px 0px;
}
Thanks in advance for your help.
You'll need to add height: 100% to your body and html tags, as well as your div classes:
html {
height: 100%; /* <------------ */
}
body {
text-align: center;
height: 100%; /* <------------ */
}
div#container {
width: 954px;
margin: 0px auto;
height: 100%;
border: 1px solid lime;
overflow: hidden;
position: relative;
}
div#left {
margin: 0px auto;
width: 5px;
border: 1px solid red;
float: left;
display: block;
height: 100%; /* <------------ */
}
div#right {
margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
height: 100%; /* <------------ */
}
div#content {
width: 920px;
margin: 0px auto;
text-align: left;
background: #ffffff;
padding: 0px 10px;
float: left;
height: 100%; /* <------------ */
}
I know this doesn't really answer your question, but I tend to prefer a method that uses position:relative on the parent and position:absolute on the capping elements. This guarantees that a dynamically changing box will not throw off your layout. I also like to use the :before :after attributes (IE 8+) because of semantic reasons, but you can use child elements instead. Works just as fine. I also threw in box-sizing (FF needs -moz syntax) so the borders don't look fugly. (probably not necessary in a production setting as your would be using a background instead).
And now, the code!
CSS
div#container:before {
content:"";
width: 5px;
border: 1px solid red;
display: block;
position:absolute;
height:100%;
left:0px;
top:0px;
box-sizing:border-box; /* careful... FF needs -moz if you need that compatibility */
}
div#container:after {
content:"";
width: 5px;
border: 1px solid blue;
display: block;
position:absolute;
height:100%;
right:0px;
top:0px;
box-sizing:border-box;
}
HTML
<div id="container">
<div id="content">
<p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
</div>
</div>
DEMO
http://jsfiddle.net/f7yL6/ http://jsfiddle.net/f7yL6/show
Media queries can be used to achieve most of what % offers without any of the pain. It's not as smooth but when used for intro banners it is perfectly acceptable.
Using mobile declarations first you would use something like this.
.banner { height: 200px; }
#media all and (min-width: 500px) {
.banner { height: 400px; }
}
#media all and (min-width: 1000px) {
.banner { height: 500px; }
}
Edit: I used min-width but min-height can also be used. To really get things to look good on all sort of devices, a mix of min-width and min-height would need to be used.