Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Can someone help me getting my divs to stack like on this image? It has to be done in CSS, since I can't split in 2 separate columns. My code should look like this :
<div class="container">
<div class="div1">
Div #1
</div>
<div class="div2">
Div #2
</div>
<div class="div3">
Div #3
</div>
</div>
The only way I can think of doing this is setting some static widths and heights. You can try the below.
I personally don't recommend this, I would suggest using a table or divs and making some columns/rows. It will keep the layout more fluid and dynamic. If you need to add more elements it will auto adjust for you.
If you avoid columns and rows, you have to calculate everything before you write it out
<div class='out'>
<div class='in big'>one</div>
<div class='in sm'>two</div>
<div class='in sm'>three</div>
</div>
.in {
float: left;
background: tomato;
border-right: 1px solid white;
border-top: 1px solid white;
}
.out {
width: 200px;
height: 400px;
}
.big {
width: 99px;
height: 399px;
}
.sm {
width: 99px;
height: 199px;
}
and a fiddle: http://jsfiddle.net/u03rs3mb/3/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 11 months ago.
Improve this question
My site is divided in blocks, and each left blocks have class block_1 and on the right part of the page have block_2.
How can I change only first div with block_1 class? .block1:nth-child(1){background-color:red;} works, but at all divs with block_1 class
The first thing is, looking at your title, don't ever have two id's that are the same, they should always be unique. Second thing is, if you edit your question to include the HTML and CSS you are using then hopefully somebody can give you a more reasonable answer than this one.....
From what I can tell you want to add a background colour to only the first div which has the class block_1
This should work in your CSS
.block_1:first-child{
background: red;
}
Looking at the details you have given your class as block_1 but the css code has block1 without the underscore_.
Eg If all your block_1's where nested under a div with an ID of 'block_1_container` your scss file could look something like
#block_1_container .block_1:first-child {
background: red;
}
It's better to split the whole site into seperate sections and then use the nth-child property to change the colors. I have attached a demo below
.container {
display: flex;
width: 100vw;
height: 100vh;
}
.block-1 {
height: 100%;
width: 100%;
background-color: #6200ee;
}
.block-2 {
height: 100%;
width: 100%;
background-color: #762fff;
}
.container:nth-child(1) .block-1 {
background-color: #212121;
}
.container:nth-child(3) .block-1 {
background-color: #212121;
}
<div class="container">
<div class="block-1"></div>
<div class="block-2"></div>
</div>
<div class="container">
<div class="block-1"></div>
<div class="block-2"></div>
</div>
<div class="container">
<div class="block-1"></div>
<div class="block-2"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Would like to use something similar to this format for my own personal blog site. The source code isn't giving me many hints to how I can code up a format like this.
I was thinking of somehow using divs within each row of a table to do this, but I know there's a cleaner way to do it. Any recommendations?
What you're asking for seems quite simple. The example you've given has quite nice design choices, in terms of font, weight and color; but the actual markup doesn't need to be very complicated.
It is basically a bunch of 2 column rows, the first column of each row containing the header and date, the second containing the abstract. The following jsfiddle does that: https://jsfiddle.net/cxmgLctq/
the html:
<div class="container">
<div class="row">
<div class="left">
<h1>
test
</h1>
</div>
<div class="right">
<h2>
more information here.
</h2>
</div>
</div>
<div class="row">
<div class="left">
<h1>
test
</h1>
</div>
<div class="right">
<h2>
more information here.
</h2>
</div>
</div>
</div>
And the css:
.row {
border-bottom: 1px solid black;
border-top: 1px solid black;
width: 100%;
height: 100px;
}
.left {
float: left;
width: 200px;
}
.right {
float: left;
width: 400px;
}
.container {
width: 600px;
height: 600px;
margin: 20px
display: block;
}
Notice that I've made no real attempt to style it in any way. That styling is what makes the example you posted look nice, and the one i made look terrible. Additionally you could use plenty of libraries to achieve this or indeed a table like you suggested, but it is completely doable with nothing more than divs as well. What you should do will depend on your situation.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
What is a good way to build a web page if you want to have a content-area and two sidebars next to it. One left and one right. Good examples for such a layout are Twitter and Quora.
Some ways that I could think of are tables (but I hear this is not a good practice), Bootstrap grid system (which I tried screwing around with, but it doesn't seem like giving you much flexibility) and... the way I did this before (and maybe the most inappropriate one), hard coding two div tags next to the content one using the CSS position (absolute) property.
I heard these days that I could use the display: flex property. Is this a good solution?
Yes, flexbox is one if the best so long as you don't need to support old browsers.
Here's a basic example, but I would suggest you start doing more research on HTML and CSS
.wrap {
display: flex;
height: 400px;
}
.sidebar {
background: #ddd;
width: 200px;
padding: 1em;
}
.content {
background: #f5f5f5;
padding: 1em;
flex: 1;
}
<div class="wrap">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
Here is a basic example using flex:
http://codepen.io/anon/pen/bgMVKO
#container{
display: flex;
}
#container div{
flex-grow: 1;
background-color: red;
text-align:center;
}
.sidebar{
max-width:150px;
background-color: yellow !important;
}
<div id="container">
<div class="sidebar">
Side Bar Left
</div>
<div>
Main Content
</div>
<div class="sidebar">
Side Bar Right
</div>
</div>
-Michael
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
#maindiv
{
display:table;
text-align:center;
border:2px solid #94a2af;
width:100%;
}
#leftsidebar
{
display:table-cell;
width: 26%;
background-color: #af9495;
border:1px solid #94a2af;
}
#rightsidebar
{
display:table-cell;
width: 24%;
background-color: #94a2af;
border:1px solid #94a2af;
}
#center
{
text-align:center;
display:table-cell;
background-color: #f2ebca;
width:50%;
}
I am trying to line up three columns in a row that will be equal height, I found this table solution to get the height(and it worked great) but I can not get the table-cells to display in the correct order. The center one displays on the right and I can't seem to find a solution.
Go easy I'm brand new to this :)
The HTML to go with that CSS should look something like this:
<div id="maindiv">
<div id="leftsidebar">Col 1</div>
<div id="center">Col 2</div>
<div id="rightsidebar">Col 3</div>
</div>
Please post your HTML for a more specific response.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a rectangular-shaped gray div that is supposed to hold a header ("sample text") and a thin turquoise highlight (which is also just a thin rectangle). When I have both the turquoise div and header inside the other div, one gets forced out.
First of all, how can I fix this issue? Also, is there a more efficient way for me to make the turquoise highlight in the gray div?
http://imgur.com/Sm8qy8J,kSuNEh5 (if I have HTML as shown)
http://imgur.com/Sm8qy8J,kSuNEh5#1 (if I remove the turquoise div)
<div class="column w2">
<div id="headerbox">
<div class="highlightbox">
</div>
<h3>sample text</h3>
</div>
</div>
Note I'm using some Sass CSS here:
h3 {
font: $header-type-font;
font-family: $header-type-font;
color: $header-type-color;
text-align: center;
}
#headerbox {
background-color: $box-color;
height: $block-height;
width: 400px;
}
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
}
Add float:left to your highlightbox class:
.highlightbox {
background-color: $highlight-color;
height: $block-height;
width: 20px;
float:left;
}