Styjun

Are spot colors limited and why CMYK mix is not treated same as spot color mix?

Why can't you say don't instead of won't?

Is Nikon D500 a good fit for nature and ambient-lighting portraits and occasional other uses?

What should be done with the carbon when using magic to get oxygen from carbon dioxide?

Looking for a plural noun related to ‘fulcrum’ or ‘pivot’ that denotes multiple things as crucial to success

Which polygons can be turned inside out by a smooth deformation?

Alternatives to Network Backup

Count the number of triangles

What does GDPR mean to myself regarding my own data?

Find feasible point in polynomial time in linear programming

Why does this London Underground poster from 1924 have a Star of David atop a Christmas tree?

Why does a sticker slowly peel off, but if it is pulled quickly it tears?

Did the Apollo Guidance Computer really use 60% of the world's ICs in 1963?

Get contents before a colon

Can I get a PhD for developing educational software?

Group riding etiquette

How do you say "half the time …, the other half …" in German?

Can a network vulnerability be exploited locally?

Stolen MacBook should I worry about my data?

Why does the `ls` command sort files like this?

Fantasy Macro Economics: What would Merfolk trade for?

How does attacking during a conversation affect initiative?

Cutting numbers into a specific decimals

If the UK Gov. has authority to cancel article 50 notification, why do they have to agree an extension with the EU

Change width of element after some height

Make a div fill the height of the remaining screen spaceHow to change an element's class with JavaScript?Retrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?How to make a div 100% height of the browser windowChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?Click through div to underlying elementsChanging the color of an hr element

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

-1

My question is simple - is this layout possible? I attached some code and how it should look like. It has a menu with categories on one side and products on the other. When div with categories ends, products' div should fill all the width below.
Dividing #products into two separate divs isn't a good idea for me, because for example height of #menu can be 1,5 row with pictures.

<style>
 #menu 
 ???
 
 #products 
 ???
 
</style>
<section class="container">
 <div id="menu">
 ...
 </div>
 <div id="products">
 <img src....>
 ...more images
 </div>
</div>

html css

share|improve this question

asked Mar 27 at 21:21

jakub1998jakub1998

1411010 bronze badges

add a comment | 

-1

My question is simple - is this layout possible? I attached some code and how it should look like. It has a menu with categories on one side and products on the other. When div with categories ends, products' div should fill all the width below.
Dividing #products into two separate divs isn't a good idea for me, because for example height of #menu can be 1,5 row with pictures.

<style>
 #menu 
 ???
 
 #products 
 ???
 
</style>
<section class="container">
 <div id="menu">
 ...
 </div>
 <div id="products">
 <img src....>
 ...more images
 </div>
</div>

html css

share|improve this question

asked Mar 27 at 21:21

jakub1998jakub1998

1411010 bronze badges

add a comment | 

My question is simple - is this layout possible? I attached some code and how it should look like. It has a menu with categories on one side and products on the other. When div with categories ends, products' div should fill all the width below.
Dividing #products into two separate divs isn't a good idea for me, because for example height of #menu can be 1,5 row with pictures.

<style>
 #menu 
 ???
 
 #products 
 ???
 
</style>
<section class="container">
 <div id="menu">
 ...
 </div>
 <div id="products">
 <img src....>
 ...more images
 </div>
</div>

html css

share|improve this question

asked Mar 27 at 21:21

jakub1998jakub1998

1411010 bronze badges

<style>
 #menu 
 ???
 
 #products 
 ???
 
</style>
<section class="container">
 <div id="menu">
 ...
 </div>
 <div id="products">
 <img src....>
 ...more images
 </div>
</div>

share|improve this question

asked Mar 27 at 21:21

jakub1998jakub1998

1411010 bronze badges

share|improve this question

asked Mar 27 at 21:21

jakub1998jakub1998

1411010 bronze badges

asked Mar 27 at 21:21

jakub1998jakub1998

1411010 bronze badges

asked Mar 27 at 21:21

jakub1998jakub1998

1411010 bronze badges

1 Answer
1

active

oldest

votes

4

You can approach this using CSS Grid.

.container 
 display: grid;
 grid-auto-rows: 1fr;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 5px;


.menu 
 background-color: orange;
 grid-row-start: 1;
 grid-row-end: 3;


.product 
 background-color: gray;


.menu,
.product 
 padding: 2em;

<div class="container">
 <div class="menu"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div> 
</div>

jsFiddle

share|improve this answer

answered Mar 27 at 21:27

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OP - Just note that based on your question you may need to have some JS to adjust the menu size/the menu's css property 'grid-row-end', if as you say it's dynamic.
  
  – DarkPurple141
  Mar 27 at 21:45
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55386647%2fchange-width-of-element-after-some-height%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

4

You can approach this using CSS Grid.

.container 
 display: grid;
 grid-auto-rows: 1fr;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 5px;


.menu 
 background-color: orange;
 grid-row-start: 1;
 grid-row-end: 3;


.product 
 background-color: gray;


.menu,
.product 
 padding: 2em;

<div class="container">
 <div class="menu"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div> 
</div>

jsFiddle

share|improve this answer

answered Mar 27 at 21:27

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OP - Just note that based on your question you may need to have some JS to adjust the menu size/the menu's css property 'grid-row-end', if as you say it's dynamic.
  
  – DarkPurple141
  Mar 27 at 21:45
  

  
  
  
  

add a comment | 

4

You can approach this using CSS Grid.

.container 
 display: grid;
 grid-auto-rows: 1fr;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 5px;


.menu 
 background-color: orange;
 grid-row-start: 1;
 grid-row-end: 3;


.product 
 background-color: gray;


.menu,
.product 
 padding: 2em;

<div class="container">
 <div class="menu"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div> 
</div>

jsFiddle

share|improve this answer

answered Mar 27 at 21:27

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OP - Just note that based on your question you may need to have some JS to adjust the menu size/the menu's css property 'grid-row-end', if as you say it's dynamic.
  
  – DarkPurple141
  Mar 27 at 21:45
  

  
  
  
  

add a comment | 

You can approach this using CSS Grid.

.container 
 display: grid;
 grid-auto-rows: 1fr;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 5px;


.menu 
 background-color: orange;
 grid-row-start: 1;
 grid-row-end: 3;


.product 
 background-color: gray;


.menu,
.product 
 padding: 2em;

<div class="container">
 <div class="menu"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div> 
</div>

jsFiddle

share|improve this answer

answered Mar 27 at 21:27

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

.container 
 display: grid;
 grid-auto-rows: 1fr;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 5px;


.menu 
 background-color: orange;
 grid-row-start: 1;
 grid-row-end: 3;


.product 
 background-color: gray;


.menu,
.product 
 padding: 2em;

<div class="container">
 <div class="menu"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div> 
</div>

.container 
 display: grid;
 grid-auto-rows: 1fr;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 5px;


.menu 
 background-color: orange;
 grid-row-start: 1;
 grid-row-end: 3;


.product 
 background-color: gray;


.menu,
.product 
 padding: 2em;

<div class="container">
 <div class="menu"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div> 
</div>

.container 
 display: grid;
 grid-auto-rows: 1fr;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 5px;


.menu 
 background-color: orange;
 grid-row-start: 1;
 grid-row-end: 3;


.product 
 background-color: gray;


.menu,
.product 
 padding: 2em;

<div class="container">
 <div class="menu"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div>
 <div class="product"></div> 
</div>

share|improve this answer

answered Mar 27 at 21:27

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

answered Mar 27 at 21:27

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges

answered Mar 27 at 21:27

Andy HoffmanAndy Hoffman

11.2k33 gold badges2020 silver badges4141 bronze badges