How to fill <div> with one fixed and one flex width column/div?

Hi there!
I struggle to implement a customer request.
He wants a specific menu, and to make that happen I had to modify the wordpress theme. Which works fine so far, but I can't find out how to format the header row properly.

The html generated by header.php looks something like this.

<div class="row">
<div class="col-md-2 col-sm-8 col-ss-9 clearfix">
<div id="logo" class="logocase"></div>
<div class="col-md-10 col-sm-4 col-ss-3">
<nav> .... </nav>

The logo is (and needs to be) fixed width and I want the right colum to fill the rest of the browser window.
I tried several combinations of display and float styles but never get the right effect.

At the moment the row is display: block, float: none, width: 100%
The logo column is display: block, float: left, width: width: 324px
The right column is display: block, float: left, width: width: 628px

Of course, that doesn't scale the right column properly.

Could you suggest some display and float styles that would do the job?

  • Ash
    • WordPress Hacker

    Hello Christian Toller

    You are using a grid library, most probably bootstrap. And I can see the columns classes are correct.

    But as you want 324px fixed with for left column, you can change the html structure like this:

    <div class="col-md-12">
    	<div id="wrapper">
    		<div id="logo">.......</div>
    		<div id="right">......</div>
    	#wrapper{width: 100%;}
    	#logo{width: 324px; float: left}
    	#right{margin-left: 324px;}

    This way we can avoid forcing grid library css and use our own custom css. You do not need to put any float for #right div in css, just use the margin-left option with no width defined :slight_smile:

    Have a nice day!


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.