html - Pseudo Element 100% width is not taking container size -

-

i'm using pseudo element (before) put border on top of container inside 2 column layout. want border on top of 1 container.

shouldn't width of pseudo element (being set 100%) make width of container it's inside?

#singlewrapper {    margin: auto;    max-width: 1100px;    }  .single #singlewrapper {    margin: auto;    max-width: 1100px;    /*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/    position: relative;    overflow: hidden;  }  #leftcolumn .content-area {    padding-right: 310px;    width: 100%;  }  .articlewrapper:before {    content: "";    position: absolute;    top: 0;    left: 0;    background: #009cff;    background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);    height: 2px;    width: 100%;  }  #leftcolumn .content-area #main {    background: #000;    background: rgba(0, 0, 0, 0.30);    padding-left: 20px;    padding-right: 20px;  }  #singlewrapper .contentholder {    margin-right: -310px;    width: 100%;    float: left;    position: relative;  }  #rightcolumn {    float: right;    position: relative;    display: block;    width: 290px;  }  #leftcolumn,  #rightcolumn {    display: inline-block;    vertical-align: top;    margin-top: 1.1em;  }
<div id="singlewrapper">    <div id="leftcolumn" class="contentholder">      <div id="primary" class="content-area">        <main id="main" class="site-main" role="main">          <div class="articlewrapper">            <h1>title</h1>            <div class="articlebody">              article body            </div>          </div>        </main>      </div>    </div>    <div id="rightcolumn">      side bar area    </div>  </div>

the problem using position:absolute

from mdn

absolute positioning

elements positioned relatively still considered in normal flow of elements in document. in contrast, element positioned absolutely taken out of flow , takes no space when placing other elements. absolutely positioned element positioned relative nearest positioned ancestor. if positioned ancestor doesn't exist, initial container used

a fix add css:

.articlewrapper {   position:relative; }

and change top:0; in .articlewrapper:before negative value best.

here snippet

#singlewrapper {    margin: auto;    max-width: 1100px;  }  .single #singlewrapper {    margin: auto;    max-width: 1100px;    /*box-shadow: inset 0 650px rgba(0,0,0,0.30);*/    position: relative;    overflow: hidden;  }  #leftcolumn .content-area {    padding-right: 310px;    width: 100%;  }  .articlewrapper {    position:relative;  }  .articlewrapper:before {    content: "";    position: absolute;    top: -30%;    left: 0;    background: #009cff;    background: linear-gradient(to right, #1d0027, #935cd2, #1d0027);    height: 2px;    width: 100%;  }  #leftcolumn .content-area #main {    background: #000;    background: rgba(0, 0, 0, 0.30);    padding-left: 20px;    padding-right: 20px;  }  #singlewrapper .contentholder {    margin-right: -310px;    width: 100%;    float: left;    position: relative;  }  #rightcolumn {    float: right;    position: relative;    display: block;    width: 290px;  }  #leftcolumn,  #rightcolumn {    display: inline-block;    vertical-align: top;    margin-top: 1.1em;  }
<div id="singlewrapper">    <div id="leftcolumn" class="contentholder">      <div id="primary" class="content-area">        <main id="main" class="site-main" role="main">          <div class="articlewrapper">            <h1>title</h1>            <div class="articlebody">              article body            </div>          </div>        </main>      </div>    </div>    <div id="rightcolumn">      side bar area    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more