/    Sign up×
Community /Pin to ProfileBookmark

Prevent div block from offsetting while resizing window

Hi all, i am working on a portfolio website and I ran into an issue where my div blocks and content won’t stay centralized when resizing the page window. I can not seem to figure out the issue. Any insights?

/*CSS code*/
`#timeline {
background-color: rgba(255, 255, 255, 0.99);
height: auto;
width: auto;
padding: 15px;
}
.job-time {
padding-top: 0px;
padding-left: 540px;
padding-right: 80px;
border-right: 1px solid;
border-color: gainsboro;
padding-bottom: 0px;
margin-bottom: 0px;
}
.job-desc {
padding-top: 0px;
padding-left: 110px;
padding-right: 200px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.timeline_head {
font-weight: bold;
white-space: nowrap;
}`

/*HTML Code*/
`<div class=”container-fluid” id=”timeline”>
<table>
<tr>
<td class=”job-time” id=”Experience”>
<span class=”timeline_head”>2017-CURRENT</span>
<br />
<p>Geologist II</p>
</td>
<td class=”job-desc”>
<span class=”timeline_head”>Current Job</span>
<br />
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
</p>
</td>
</tr>

<tr>
<td class=”job-time”>
<span class=”timeline_head”>2016-2017</span>
<br />
<p>Assistant Manager</p>
</td>
<td class=”job-desc”>
<span class=”timeline_head”>Old Job 2</span>
<br />
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
</p>
</td>
</tr>

<tr>
<td class=”job-time”>
<span class=”timeline_head”>2007-2016</span>
<br />
<p>Old Job 1</p>
</td>
<td class=”job-desc”>
<span class=”timeline_head”>US ARMY CORPS OF ENGINEERS</span>
<br />
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
</p>
</td>
</tr>
</table>

</div>`

Sorry for all the HTML code not being formatted in the code blocks, new to the site and not sure why that is happening.

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumAug 10.2020 — Unfortunately backticks won't work for HTML reliably. Use code tags instead:

`your code here`
Copy linkTweet thisAlerts:
@solemnservantauthorAug 10.2020 — Ok that thanks! Reposting since the editing time period has expired:

/CSS code/

#timeline {<br/>
background-color: rgba(255, 255, 255, 0.99);<br/>
height: auto;<br/>
width: auto;<br/>
padding: 15px;<br/>
}<br/>
.job-time {<br/>
padding-top: 0px;<br/>
padding-left: 540px;<br/>
padding-right: 80px;<br/>
border-right: 1px solid;<br/>
border-color: gainsboro;<br/>
padding-bottom: 0px;<br/>
margin-bottom: 0px;<br/>
}<br/>
.job-desc {<br/>
padding-top: 0px;<br/>
padding-left: 110px;<br/>
padding-right: 200px;<br/>
padding-bottom: 0px;<br/>
margin-bottom: 0px;<br/>
}<br/>
.timeline_head {<br/>
font-weight: bold;<br/>
white-space: nowrap;<br/>
}


/HTML Code/
&lt;div class="container-fluid" id="timeline"&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td class="job-time" id="Experience"&gt;
&lt;span class="timeline_head"&gt;2017-CURRENT&lt;/span&gt;
&lt;br /&gt;
&lt;p&gt;Geologist II&lt;/p&gt;
&lt;/td&gt;
<br/>
<i> </i> &lt;td class="job-desc"&gt;
<i> </i> &lt;span class="timeline_head"&gt;Current Job&lt;/span&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;p&gt;
<i> </i> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<i> </i> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
<i> </i> Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
<i> </i> Mauris placerat eleifend leo
<i> </i> &lt;/p&gt;
<i> </i> &lt;/td&gt;
&lt;/tr&gt;

<i> </i>&lt;tr&gt;
<i> </i> &lt;td class="job-time"&gt;
<i> </i> &lt;span class="timeline_head"&gt;2016-2017&lt;/span&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;p&gt;Assistant Manager&lt;/p&gt;
<i> </i> &lt;/td&gt;
<i> </i> &lt;td class="job-desc"&gt;
<i> </i> &lt;span class="timeline_head"&gt;Old Job 2&lt;/span&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;p&gt;
<i> </i> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<i> </i> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
<i> </i> Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
<i> </i> &lt;/p&gt;
<i> </i> &lt;/td&gt;
<i> </i>&lt;/tr&gt;

<i> </i>&lt;tr&gt;
<i> </i> &lt;td class="job-time"&gt;
<i> </i> &lt;span class="timeline_head"&gt;2007-2016&lt;/span&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;p&gt;Old Job 1&lt;/p&gt;
<i> </i> &lt;/td&gt;
<i> </i> &lt;td class="job-desc"&gt;
<i> </i> &lt;span class="timeline_head"&gt;Old Job 1&lt;/span&gt;
<i> </i> &lt;br /&gt;
<i> </i> &lt;p&gt;
<i> </i> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<i> </i> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
<i> </i> Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
<i> </i> Mauris placerat eleifend leo
<i> </i> &lt;/p&gt;
<i> </i> &lt;/td&gt;
<i> </i>&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@SempervivumAug 10.2020 — Your layout looks nice but is not responsive at all. The large paddings require a lot of space, therefore it can be viewed only when the viewport is very large. I recommend using relative paddings and grid layout instead of a table.
Copy linkTweet thisAlerts:
@solemnservantauthorAug 10.2020 — @Sempervivum#1621970 Thanks for the reply @Sempervivum#1621970 . I wanted to have a newspaper column design which is why I used such large paddings. My familiarity with grid layouts is relatively limited other than my exposure to bootstrap4. Can you provide links to good implementation of grid layouts?
Copy linkTweet thisAlerts:
@SempervivumAug 10.2020 — Common resources are w3schools and MDN but both don't fit your layout.

I adjusted your HTML and CSS to grid layout:
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="Styler.css"&gt;
&lt;style&gt;
body {
display: grid;
grid-template-columns: 2fr 1fr;
align-items: center;
}

<i> </i> #timeline {
<i> </i> background-color: rgba(255, 255, 255, 0.99);
<i> </i> height: auto;
<i> </i> width: auto;
<i> </i> padding: 15px;
<i> </i> }

<i> </i> .job-time {
<i> </i> padding-top: 0px;
<i> </i> padding-left: 540px;
<i> </i> padding-right: 80px;
<i> </i> border-right: 1px solid;
<i> </i> border-color: gainsboro;
<i> </i> padding-bottom: 0px;
<i> </i> margin-bottom: 0px;
<i> </i> }

<i> </i> .job-desc {
<i> </i> padding-top: 0px;
<i> </i> padding-left: 110px;
<i> </i> padding-right: 200px;
<i> </i> padding-bottom: 0px;
<i> </i> margin-bottom: 0px;
<i> </i> }

<i> </i> .timeline_head {
<i> </i> font-weight: bold;
<i> </i> white-space: nowrap;
<i> </i> }
<i> </i>&lt;/style&gt;
<i> </i>&lt;title&gt;Grid Layout&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="job-time" id="Experience"&gt;
&lt;span class="timeline_head"&gt;2017-CURRENT&lt;/span&gt;
&lt;br /&gt;
&lt;p&gt;Geologist II&lt;/p&gt;
&lt;/div&gt;
&lt;div class="job-desc"&gt;
&lt;span class="timeline_head"&gt;Current Job&lt;/span&gt;
&lt;br /&gt;
&lt;p&gt;
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="job-time"&gt;
&lt;span class="timeline_head"&gt;2016-2017&lt;/span&gt;
&lt;br /&gt;
&lt;p&gt;Assistant Manager&lt;/p&gt;
&lt;/div&gt;
&lt;div class="job-desc"&gt;
&lt;span class="timeline_head"&gt;Old Job 2&lt;/span&gt;
&lt;br /&gt;
&lt;p&gt;
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="job-time"&gt;
&lt;span class="timeline_head"&gt;2007-2016&lt;/span&gt;
&lt;br /&gt;
&lt;p&gt;Old Job 1&lt;/p&gt;
&lt;/div&gt;
&lt;div class="job-desc"&gt;
&lt;span class="timeline_head"&gt;US ARMY CORPS OF ENGINEERS&lt;/span&gt;
&lt;br /&gt;
&lt;p&gt;
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo
&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
Copy linkTweet thisAlerts:
@SempervivumAug 10.2020 — ... and modified the CSS in order to make the layout responsive:
body {
display: grid;
grid-template-columns: 5fr 3fr;
align-items: center;
}

<i> </i> #timeline {
<i> </i> background-color: rgba(255, 255, 255, 0.99);
<i> </i> height: auto;
<i> </i> width: auto;
<i> </i> padding: 15px;
<i> </i> }

<i> </i> .job-time {
<i> </i> padding-top: 0px;
<i> </i> /* padding-left: 60%; */
<i> </i> justify-self: end;
<i> </i> padding-right: 10%;
<i> </i> width: 10em;
<i> </i> /* border-right: 1px solid; */
<i> </i> border-color: gainsboro;
<i> </i> padding-bottom: 0px;
<i> </i> margin-bottom: 0px;
<i> </i> }

<i> </i> .job-desc {
<i> </i> padding-top: 0px;
<i> </i> padding-left: 5%;
<i> </i> padding-right: 10%;
<i> </i> padding-bottom: 0px;
<i> </i> margin-bottom: 0px;
<i> </i> border-left: 1px solid lightgrey;

<i> </i> }

<i> </i> .timeline_head {
<i> </i> font-weight: bold;
<i> </i> white-space: nowrap;
<i> </i> }
Copy linkTweet thisAlerts:
@solemnservantauthorAug 11.2020 — Thank you @Sempervivum#1621978. I will take a look at this tomorrow and let you know if I have any additional questions.
Copy linkTweet thisAlerts:
@johnolivarAug 11.2020 — You can directly call bootstrap directories
×

Success!

Help @solemnservant spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...